Динамічно додайтеControl до formgroup Angular 5

Спроба динамічно додати новий запис formControl до моєї формиGroup у Angular.

method() {
  this.testForm.addControl('new', ('', Validators.required));
}

Чи можна це зробити?

Звичайно, але другими параметрами має бути екземпляр FormControl. Щось на зразок:

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

Ви також можете динамічно додавати валідатори, якщо хочете, з setValidatorsметодом.

Більше інформації тут: https://angular.io/api/forms/FormGroup#addControl

Якщо ви використовуєте 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]
      });
    }
}