각도에서 양식 그룹에 동적으로 컨트롤 추가

각도에서 양식 그룹에 동적으로 컨트롤 추가

Angular에서 FormControl을 FormGroup에 동적으로 추가하려면 어떻게 해야 합니까?

예를 들어, 어떤 이름이 "new"이고 기본값은 '입니다.

addControl 당신에게 필요한 것입니다.두 번째 매개 변수는 다음과 같은 FormControl 인스턴스여야 합니다.

this.testForm.addControl('new', new FormControl('', Validators.required));

메서드를 사용하려는 경우 검증자를 동적으로 추가할 수도 있습니다.이를 호출하면 기존 동기화 검증자가 덮어씁니다.

사용 중인 경우FormBuilder양식의 경우 컨트롤을 추가하는 데도 사용할 수 있습니다.

constructor(private fb: FormBuilder) { }
    
method() {
  this.testForm.addControl('new', this.fb.control('', Validators.required));
}

간단한 사용:

  this.testForm.addControl('new', this.fb.group({
      name: ['', Validators.required]
    }));

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.scss']
})
export class ComponentName implements OnInit {

    formGroup: FormGroup;        
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
       this.formGroup = this.formBuilder.group({
        firstName: new FormControl('', Validators.required),
        lastName:  new FormControl('', Validators.required),
      });    
    }
    
    // Add single or multiple controls here
    addNewControls(): void {
      this.formGroup = this.formBuilder.group({
         ...this.formGroup.controls,
         email: ['', Validators.required],
         phone: ['', Validators.required]
      });
    }
}

각 14는 양식에 타이핑을 추가했습니다.새 구문은 다음과 같습니다.

양식선언서

public form = new FormGroup<{ new?: FormControl<string | null> }>();

참고:new컨트롤을 선택 사항으로 선언해야 합니다.사용할 수 없습니다.addControl필드가 먼저 선언되지 않은 경우.

더 큰 형식의 경우 인터페이스를 사용할 수 있습니다.

interface MyForm {
    field1: FormControl<string | null>;
    field2: FormControl<string | null>;
    new?: FormControl<string | null>;
}

public form = new FormGroup<MyForm>({
    field1: new FormControl<string | null>('', Validators.required),
    field2: new FormControl<string | null>('', Validators.required),
});

양식에 제어 추가

this.form.addControl('new', new FormControl<string | null>('', Validators.required));

저는 Angular 12에서 같은 문제에 직면했습니다.다음 코드 스니펫은 저에게 완벽하게 작동했습니다.

양식 선언:

public form: FormGroup;

양식에 대한 새 컨트롤을 만듭니다.

this.form.addControl('new', new FormControl('', Validators.required));

새 추가하기FormControl기존의 단 하나의 인스턴스에 동적으로FormArray주조 기술을 사용합니다.

form: FormGroup;

constructor(private fb: FormBuilder){
  this.form = this.fb.group({
    formArrayName: this.fb.array([])
  });
} //

addNewFormArrayInstance(insertIndex: number){
  // insertIndex to insert at a specific position
  const NEWFORMGROUP = new FormGroup({
    'control1': new FormControl(''),
    'control2': new FormControl({value: [], disabled: true}),
    'control3': new FormControl('', Validators.required),
    'control4': new FormControl(true)
  });

  // use push(NEWFORMGROUP) if needed
  (<FormArray>this.form.get('formArrayName')).insert(insertIndex, NEWFORMGROUP);
} //

addControlToFormArrayInstance(index: number){
  // index is the FormArray instance's index to which a new control is to be added
  (<FormGroup>
    (<FormArray>this.form.get('formArrayName')).controls[index]
  ).addControls(
    'newControl', new FormControl('new')
  );
} //

언급URL : https://stackoverflow.com/questions/47573797/addcontrol-to-formgroup-dynamically-in-angular