角4フォームの検証

Question

角4のフォームを外部リンク（つまりタグから外に出て）をクリックして検証する方法。フォームが有効な場合、フォームデータ以外のアクションは検証メッセージを表示します。フォームが有効な場合、私はフォームフィールド値を取得するだけでフォームを送信したくありません。

Answer 1

これは別の質問に対する私の答えポストです：

簡単な方法は、このように、反応性フォームを使用することです：

コード：

import {ReactiveForm, FormBuilder, Validators} from '@angular/form'; 
    export class SignupFormComponent implements OnInit { 
     userForm: FormGroup; 
     firstName: string; 

     constructor(private _formBuilder:FormBuilder){} 

     ngOnInit() { 
     this.userForm = this._formBuilder.group({ 
      'firstName': ['',[Validators.required,Validators.minLength(5)]] 
     }); 
     } 

     onSubmit() { 
     console.log(this.firstName); 
     } 
    } 

HTML：

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()" name="userForm"> 
      <div class="form-group"> 
      <label>First Name</label> 
      <input type="text" [(ngModel)]="firstName" class="form-control" formControlName="firstName"> 
      <p *ngIf="userForm.controls.firstName.invalid && (userForm.controls.firstName.dirty || userForm.controls.firstName.touched)"> Error message </p> 
      </div> 
      <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit </button> 
     </form>