각도 반응 폼 : 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/guide/form-validation#reactive-form-validation

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

.