Angular Reactive Forms：formGroupNameで.controlsプロパティを使用します。

Question

すべてのインスタンスに対してAbstractControlを定義する代わりに、Angular ReactiveフォームでmyForm.controlsプロパティを使用することができますか？

このメソッドは、NG-Bookで提案されていますが、ネストされたフォームおよびFormGroupNameでは使用されません。

ここに私のコードです。

HTML：

<form [formGroup]="myForm" 
    (ngSubmit)="onSubmit(myForm.value)"> 
<div> 
    <input type="text" 
     id="nameInput" 
     placeholder="Product" 
     [formControl]="myForm.controls['name']"> 
    <div *ngIf="myForm.controls['name'].hasError('required')">Name is 
    required</div> 
</div> 
<div formGroupName="address"> 
    <input type="text" 
     id="streetInput" 
     placeholder="Enter Street" 
     [formControl]="myForm.controls['street']"> 
    <div *ngIf="myForm.controls['street'].hasError('required')">Street is required</div> 
</div> 
<button type="submit" class="ui button">Submit</button> 

JS：

export class App { 
    myForm: FormGroup; 

    constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'name': ['', Validators.required], 
     'address': fb.group({ 
     'street': ['', Validators.required], 
     }); 
    } 
    } 
} 

私は入力にformControlName="street"を設定することができます実現が、その後、私はそれが検証状態だかを決定するためにAbstractControlを使用しなければならないと思います。どこで私の非入れ子formGroupとして、私はちょうどmyForm.controls['name'].hasError('required')を使用することができます。

Answer 1

私はあなたの質問をよく理解しています。

コントロールからネストされた検証を取得しますか？

その後、あなたはmyForm.get('address').control['street'].hasError('required')または

myForm.get('address').get('street').hasError('required')を得ることができますし、errors.requiredにhasError('required')を変更することができます。

これらのリンクは、フォームの検証に関する説明です。

https://angular.io/api/forms/FormGroup#example-4

https://angular.io/guide/form-validation#reactive-form-validation

私はあなたの質問、コメントを誤解している場合。