Angular 4表單驗證和錯誤信息

-2

我必須在我的應用程序中對錶單進行驗證。我正在使用角4.我的應用程序中有10個以上的表單。我不知道我的問題是否有效。我很困惑這個實現。Angular 4表單驗證和錯誤信息

我的問題：我需要在表單字段添加驗證，包括強制性和驗證，如電子郵件，電話號碼等，如果用戶輸入表單用戶知道一些字段用戶可能不知道需要填寫其他字段。但需要保存有效的字段，並需要在窗體中顯示錯誤消息。

我怎樣才能在前端實現我使用角4和背用的NodeJS

2017-10-15 Team

正如所寫，這個問題相當廣泛。添加您正在處理的一種表單的示例可能會有所幫助。 Angular擁有一個帶有表單驗證示例的文檔：https：//angular.io/guide/form-validation。希望這有助於你開始。 – stealththeninja

@stealththeninja這不僅驗證。我需要驗證字段，同時我需要將有效字段保存到db。有一件事我可以做的是需要檢查每個字段是否有效，在保存之前我不認爲這是個好主意。任何其他建議？ – Team

我建議創建一個最小的，完整的，可驗證的示例：https://stackoverflow.com/help/mcve。除此之外，我們猜測您正在嘗試構建和重複或鏈接到Angular文檔。 – stealththeninja

我建議使用ReactiveFormsModule每當使用表單結束。如果你不熟悉它，那麼查看文檔，但它不應該是一個很大的問題，因爲它非常簡單。

form: FormGroup; 

constructor(formBuilder: FormBuilder){ 
    this.form = formBuilder.group({ 
     name: ['', Validators.required], 
     lastName: '', 
     email: ['', [Validators.required, Validators.email]] 
    }); 
}

所以基本上這裏發生了什麼是我們與活性表單時需要FormGroup實例。我們使用FormBuilder類，並調用它的group方法，該方法採用我們想要創建的形式的對象並返回FormGroup實例。我們傳遞的對象的每個屬性都將被稱爲FormGroup的FormControls，因此在此示例中，我們聲明瞭一個FormGroup，其中包含三個名爲name，lastName和email的FormControls。

這些FormControls的值用於初始化，它可以是該FormControl的實際值或一個數組，其中第一個元素將是該FormControl的值，第二個將是ValidatorFn或數組ValidatorFn。如你所見，我們定義了這樣的名稱FormControl：name: ['', Validators.required]這意味着初始值將是一個空字符串，並且這個FormControl將是必需的。 lastName只是一個空字符串，因爲我們不希望對該字段進行任何驗證。電子郵件更有趣，因爲這個FormControl需要多個驗證器，所以我們將它傳遞給一個數組。

而現在，實現這一切在我們的模板是很容易的，以及

<form [formGroup]="form"> 
    <div> 
     <input formControlName="email"> 
     <div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div> 
     <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div> 
    </div> 
    ...

如果你不想讓用戶能夠提交表單，直到它是有效的：<button [disabled]="form.invalid">Save</button

來源

2017-10-15 23:43:15 Christian

Angular 4表單驗證和錯誤信息

回答

相關問題