중첩 양식 그룹의 컨트롤을 각도로 가져오는 방법

중첩 양식 그룹의 컨트롤을 각도로 가져오는 방법

https://angular.io/api/forms/FormGroup#controls

내 양식에 따름:

this.form= this.fb.group({
  id: ['', [Validators.required]],
  name: ['', [Validators.maxLength(500)]],
  child: this.fb.group({
    id: [ '', [Validators.required]],
    name: ['']
  })
});

나는 아이의 타당성을 얻고 싶어요, 예를 들어.this.form.controls.child.controls.valid,하는 동안에.controlsrenturn AbstractControl은 이 양식 그룹 api를 참조합니다.

각도 컴파일 오류, 오류 TS2339: 속성 'controls'가 'AbstractControl' 유형에 없습니다.

가깝습니다.아래 코드 예제를 참조하거나 내가 만든 매우 단순하고 추한 StackBlitz에서 그것을 가지고 놀 수 있습니다.

스택 블리츠 데모

템플릿에 하위 양식 그룹을 추가해야 합니다.

<div>
  <form [formGroup]="myForm" (ngSubmit)="send()">
    <input type="text" name="name" formControlName="name">
    <div formGroupName="child">
       <input type="text" name="id" formControlName="id">
       <input type="text" name="name" formControlName="name">
    </div>
    <button class="btn btn-primary">send</button>
  </form>
</div>

그런 다음 구성 요소에서 이렇게 필드에 액세스할 수 있습니다.

this.myForm['controls'].child['controls'].id.valid

이 예를 위해 제가 만든 반응형은 다음과 같습니다.

this.myForm = this.fb.group({
      name: ['', [Validators.maxLength(500)]],
      child: this.fb.group({
        id: ['', [Validators.required]],
        name: ['']
      })
    });

**2019년 12월 업데이트**

My original answer is a bit dated. There is now a much cleaner way of accomplishing this! Below is example code of the cleaner solution.

this.myForm.get('child.id').valid

중첩된 FormGroup에서 FormControl에 액세스하는 매우 간단한 방법은 몇 가지가 있습니다.AbstractControl 사용 참고 사항:

중첩 컨트롤 검색

예를 들어, 사용자 하위 그룹에 중첩된 이름 컨트롤을 가져오려면:

this.form.get(person.name ');

-또는-

this.form.get(['person', 'name']);

userForm=new FormGroup({
    fName:new FormControl('',Validators.required),
    lName:new FormControl(),
    eMail:new FormControl('',[Validators.email,Validators.required]),
    qualificationForm:new FormGroup({
     perS:new FormControl(''),
     perHs:new FormControl('')
    })
});

save(){
  console.log(this.userForm.get("qualificationForm.perS").value);
}

제가 많이 사용하는 한 가지 방법은 아이를 캐스팅하는 것입니다.FormGroup아주FormGroupget('control') 메서드는 다음을 반환합니다.AbstractControl그런 다음 'get()' 방법을 사용하여 어린이에게 액세스합니다.FormGroup다음과 같은 옵션:

(this.form.get('child') as FormGroup).get('id').valid

다음과 같은 양식이 있습니다.

registerLibrarianForm = this.formBuilder.group({
       firstName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(128), Validators.pattern(this.nameRegex)]],
       lastName:  ['', [Validators.required, Validators.minLength(2), Validators.maxLength(128), Validators.pattern(this.nameRegex)]],
       address: this.formBuilder.group({
         country: ['', [Validators.required]],
         city: ['', [Validators.required]]})})

기본 양식(registerForm)의 컨트롤을 얻는 방법은 간단한 반환 방법을 만드는 것입니다.

get controls(){
return this.registerForm.controls;
}

그리고 중첩된 양식(주소)의 제어를 얻는 방법은 다른 방법을 만드는 것입니다.

get addressControls(){
return ((this.registerForm.get('address') as FormGroup).controls)
}

따라서 메인 폼에 대해 HTML에서 *ngIf를 수행해야 하는 경우 첫 번째 방법을 사용합니다.

*ngIf="controls.firstName.errors && ...

중첩된 양식의 경우:

*ngIf="addressControls.country.errors && ...

이것이 도움이 되기를 바랍니다!

언급URL : https://stackoverflow.com/questions/49269403/how-to-get-nested-formgroups-controls-in-angular