Angular 4 Reactive Formsでの送信時の検証メッセージの表示

Question

Angular 4、Reactive formsを使用しています。ユーザーがSubmit/Create Accountボタンをクリックすると、検証エラーメッセージが表示されます。 私が使用しているHTMLとtypescriptコードは次のとおりです。

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> 

    <div class="form-group"> 
    <input type="text" 
      id="firstname" 
      name="firstname" 
      formControlName="firstname" 
      placeholder="First Name"> 
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
      class="help-block"> Please Enter First Name (Minimum 2 Characters)</span> 
    </div> 

    <div class="form-group"> 
    <input type="text" 
      id="lastname" 
      name="lastname" 
      formControlName="lastname" 
      placeholder="Last Name"> 
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
      class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span> 
    </div> 

    <div class="form-group"> 
    <button type="submit" 
      class="btn btn-success btn-lg btn-qte">Create Account</button> 
    </div> 

</form> 

---

TYPEスクリプトコード

---

export class UserRegistrationComponent implements OnInit { 
    signupForm: FormGroup; 

    ngOnInit() { 
     this.signupForm = new FormGroup({ 
      'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]), 
      'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]), 
      'businessname': new FormControl(null), 
      'phonenumber': new FormControl(null, [Validators.required]), 
      'email': new FormControl(null, [Validators.required, Validators.email]), 
      'password': new FormControl(null, [Validators.required]), 
      'confirmpassword': new FormControl(null, Validators.required) 

     }); 
    } 

    onSubmit() { 
     console.log(this.signupForm) 
    } 

} 

Answer 1

012を通じてtouched、dirty、フォームコントロールのvalidなどのプロパティを取得するには

onSubmit() { 
    console.log(this.signupForm) 
    this.signupForm.controls['firstname'].markAsTouched() 
} 

Answer 2

ような何か用途：

signupForm.controls.firstname.touched同じ方法で、有効なものと無効なもののような他のプロパティを取得することができます。

FormControlのオブジェクトを個別に作成した場合は、を使用しないで、そのオブジェクトのプロパティにfirstname.touchedとしてアクセスできます。

モデル駆動型フォームでの検証の詳細については、Model Driven Form Validationsを参照してください。