角度2でのフォーム検証

Question

私はangular2でフォーム検証を書いています。 私のエラーがCannot read property 'valid' of undefined

私のHTMLファイルは、私がdiv [hidden]="author.valid"でエラーを取得していますすなわち

<form id="commentform" class="comment-form" novalidate 
     [ngFormModel] = "contact" (ngSubmit)="submit(contact.value)"> 
      <div class="form-input"> 
      <input type="text" id="author" name="author" placeholder="Name *" value="" 
      [ngFormControl] = "contact.controls['author']" pattern="[a-zA-Z ]*"/> 
     <div [hidden]="author.valid">Name is required 
     </div> 
      </div> 

フォームが含まれています。著者は変数ではないので エラーが私のコンポーネントファイルが

import {FormBuilder ,ControlGroup,Validators } from '@angular/common'; 
@Component({ 
    selector: 'my-contact', 
    templateUrl : 'app/contact.html' 
    } 
export class ContactComponent { 
    contact : ControlGroup; 
    constructor(private _OnChange:OnChange,private _formBuilder : FormBuilder){ 
    this.ngAfterViewInit(); 
    } 

    ngOnInit() : any{ 
     this.contact = this._formBuilder.group({ 
     'author' : ['',Validators.required] }); } 
submit(){ 
    console.log(JSON.stringify(this.contact.value)); 
    } 

Answer 1

が含まれていCannot read property 'valid' of undefined"

使用

[hidden]="contact.controls['author'].valid" 

Answer 2

です。使用

<div [hidden]="contact?.controls?.author?.valid">Name is required</div> 

実際には、さらに優れています。新しいフォームモジュールを使用する必要があります@角度/フォーム https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol