我的表單無效，但我的 (ngSubmit) 正在調用 function

Question

我有一個 formGroup，里面有一個提交按鈕：

<form [formGroup]="myGroup" (ngSubmit)="submitForm()">
   <input type="text" formControlName="name">
   <button type="submit">Submit</button>
</form>

當我的組件初始化時，我調用這個 function 來構建表單：

buildForm() {
  this.myGroup = new FormGroup({
    name: new FormControl(null, [Validators.required]),
  });
}

當我不填寫輸入並單擊按鈕時，我的組件正在調用submitForm() 。 我放了一個console.log(myGroup.valid)並且它是false ，但仍然調用(ngSubmit)事件。
我有其他組件，似乎當表單無效時，當用戶單擊提交按鈕時，Angular 自動不調用提交 function。 我不知道我是否忘記了 Angular 做這個自動檢查，或者我真的需要在我的提交 function 中做類似的事情，比如：

if(this.myGroup.valid) {}

Answer 1

不要從啟用的按鈕開始，我寧願在驗證良好之前不顯示任何按鈕。

您可以像這樣連接更改偵聽器：

fromGroup.changes(changes=>{
  if (changes=="VALID"){ showMyButton(); }
})

Answer 2

您看到 forms 在不同組件中的不同行為的最可能原因是在您的項目中同時使用模板 forms 和反應式 forms。 Angular Forms 簡介描述了兩種表單類型之間的主要區別。

---

第一種方法

禁用模板中的提交按鈕並仔細檢查組件中的輸入。

正如其他評論者所建議的那樣，使用反應式 forms 您將需要禁用提交按鈕，直到表單數據有效。

<button type="submit" [disabled]="!myGroup.valid">Submit</button>

其他人沒有提到的是，當您在表單標簽中包含(ngSubmit)時，它還允許使用 enter 鍵提交表單。 因此，即使您的提交按鈕被禁用，用戶點擊回車時也可以提交無效的表單值。

單擊輸入時，您可以輕松中止，並且表單數據對於一行（格式錯誤）的代碼無效：

submitForm() {
  if (!myGroup.valid) { return; }
  // Your form submission logic
}

---

第二種方法

另一種選擇是從您的表單標簽中刪除(ngSubmit) ，然后從您的提交按鈕中刪除type="submit"並添加(click)到您的提交按鈕。

<button [disabled]="!myGroup.valid" (click)="submitForm()">Submit</button>

這消除了使用 enter 鍵提交表單的能力，這在某些情況下可能是可取的，但在其他情況下則不是。

登錄到應用程序時，用戶可能希望能夠按 Enter 提交他們的憑據。 在可能有多個 forms 的頁面上，可能會混淆究竟是哪種形式的回車鍵正在觸發。

您仍然應該仔細檢查表單在您的組件邏輯中是否有效，因為精明的用戶很容易使用瀏覽器工具在您的頁面上啟用按鈕。