提供欄位驗證確認資料是否輸入

1. 設定表單:
   • 使用 Template-driven Forms 來建立表單。
2. 定義驗證規則:
   • 使用內建驗證器，Validators.required、Validators.minLength、Validators.email 等．
   • 使用 .dirty 來判斷控制項是否被使用者修改過。

<label class="p-2" for="username">標題:</label>
        <input class="p-2" style="width: 250px" pInputText id="username" type="text" [(ngModel)]="title" required  #titleCtrl="ngModel"/>
        <div *ngIf="titleCtrl.touched && titleCtrl.invalid">
          <p-message severity="error" text="請輸入標題"></p-message>
        </div>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">旅遊時間:</label>
        <p-calendar [(ngModel)]="PlayedTime" [showIcon]="true" #playedTimeCtrl="ngModel"></p-calendar>
        <div *ngIf="playedTimeCtrl.touched && playedTimeCtrl.invalid">
          <p-message severity="error" text="請選擇時間"></p-message>
        </div>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">類型:</label>
        <input class="p-2" style="width: 250px" pInputText type="text" [(ngModel)]="ArticleType" #articleTypeCtrl="ngModel"/>
        <div *ngIf="articleTypeCtrl.touched && articleTypeCtrl.invalid">
          <p-message severity="error" text="請輸入類型"></p-message>
        </div>
      </div>
      <div class="flex justify-content-start">
        <label class="p-2">地點:</label>
        <input class="p-2" style="width: 250px" pInputText type="text" [(ngModel)]="Position" #positionCtrl="ngModel"/>
        <div *ngIf="positionCtrl.touched && positionCtrl.invalid">
          <p-message severity="error" text="請輸入地點"></p-message>
        </div>
      </div>

@ViewChild('titleCtrl') titleModel!: NgModel;
@ViewChild('playedTimeCtrl') playedTimeModel!: NgModel;
@ViewChild('articleTypeCtrl') articleTypeModel!: NgModel;
@ViewChild('positionCtrl') positionModel!: NgModel;

儲存文件

editSave() {
    const article : Article = {} as Article;
    if (this.articleId != null) {
      article.IdArticle = this.articleId;
    }
    if (
      !this.titleModel.valid ||
      !this.playedTimeModel.valid ||
      !this.articleTypeModel.valid ||
      !this.positionModel.valid
    )
    {
      this.saveCheck = true;
      return;
    }

    article.Title = this.title;
    article.PlayedTime = this.PlayedTime;
    article.ArticleType = this.ArticleType;
    article.Position = this.Position;
    article.Description = this.Description;

    if (this.user !== undefined && this.user !== null) {
      const userArticle : UserArticle = {} as UserArticle;
      userArticle.article = article;
      userArticle.idUser = this.user.IdUser;
      this.articleListService.saveUserArticle(userArticle).
        subscribe((data: any) => {
          console.log(data);
          void this.router.navigate(['/articleList']);
      });
    }
  }