表單提交后角度2顯示驗證錯誤

Question

我正在構建模型驅動的Angular2表單。我找到的大多數例子都會禁用提交按鈕，直到表單有效。但是，我不是這種模式的粉絲，並且在提交表單後寧願向用戶顯示任何可能的錯誤。

我在提交之後比較了我的表單ControlGroup數據之前&並且看不到任何區別。

有沒有一種方法，以確定是否提交表單，這樣我可以顯示我在線驗證錯誤？

Answer 1

目前沒有辦法。您可以自己在提交處理程序中設置一個標誌。

這是正在進行的工作，雖然

見
- https://github.com/angular/angular/issues/2960 - https://github.com/angular/angular/pull/7449

Answer 2

我不認爲接受的答案 - 以及相關的更新角度確實解決了這個問題。

你可以使用form.submitted？標誌來確定用戶是否已經嘗試提交 - 但不會自動顯示錯誤（例如，如果您有必填字段並且用戶在您的表單上沒有輸入任何內容，但只需點擊提交，那麼您會希望所有需要的字段顯示所需的錯誤通知）。

onSubmit() { 
    if (this.form.valid) { 
     console.log('form submitted'); 
    } else { 
     this.validateAllFormFields(this.form); 
    }; 
    } 

    validateAllFormFields(formGroup: FormGroup) { 
    Object.keys(formGroup.controls).forEach(field => { 
     const control = formGroup.get(field);    
     if (control instanceof FormControl) {    
     control.markAsTouched({ onlySelf: true }); 
     } else if (control instanceof FormGroup) {  
     this.validateAllFormFields(control);   
     } 
    }); 
    } 

信貸和充分的解釋here：

這可以如下完成。