角度ReactiveFormは、このような検証プログラムで

Question

テンプレートをしていると仮定すると、コードスニペットトリガー：

<form #myForm="ngForm"> 
    <md-input-container> 
    <input mdInput name="address" [formControl]="addressCtrl" [(ngModel)]="address" required> 
    </md-input-container> 
</form> 

を、コンポーネントがこのようなものがあります（）他のアクションによって呼び出される

export class AddressComponent { 
    @ViewChild("myForm") 
    myForm: NgForm; 

    addressCtrl = new FormControl(); 
    address: string; 

    constructor() {} 

    validate() { 
     this.addressCtrl.markAsTouched(); 
     console.log("Is address valid? " + this.addressCtrl.valid); 
     console.log("Is myForm valid? " + this.myForm.form.valid); 
    } 
} 

検証し、プログラムでフォームの検証をトリガすることを目的としています。

ただし、コンソールログには、myFormが有効な間はaddressCtrlが無効であることが示されています。

子コントロールが無効な場合、myFormステータスを無効に更新する方法を知っている人は誰ですか？

ありがとうございます！

Answer 1

formControlディレクティブを使用しています。このディレクティブはスタンドアローンになるように設計されているため、親に登録されません。formGroupあなたがグループのコントロールを表示した場合、あなたが作成したコントロールがそのグループの一部ではありません表示されます。

console.log(this.form.value);  // {} 
console.log(this.myForm.controls); // undefined 

あなたはformControlNameディレクティブを使用する必要がありますが、そのためには、クラスでformGroupを作成する必要があります私はより良い答えを与えるために、ソースを見ていると思いますが、デバッグに良い方法は、実際にあなたのhtmファイルのチェックを追加することであってもよい

<form [formGroup]="group"> 
    <md-input-container> 
    <input mdInput name="address" formControlName="address" [(ngModel)]="address" required> 
    </md-input-container> 
</form>