代码之家 › 专栏 › 技术社区 › Ankur Akvaliya

扩展现有的FormBuilder。初始化后直接分组,而不是逐个添加FormControl[duplicate]

formgroups angular-forms angular7 typescript angular

0

Ankur Akvaliya · 技术社区 · 7 年前

如何在Angular中向FormGroup动态添加FormControl?

例如我想添加一个名为“new”且默认值为“”的强制控件。

0 回复 | 直到 5 年前

1

238

Nikita Fedyashev 5 年前

addControl 这就是你需要的。请注意,第二个参数必须是FormControl实例,如下所示:

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

如果需要,还可以使用 setValidators 方法调用此函数将覆盖任何现有的同步验证程序。

2

55

HDJEMAI 5 年前

如果你正在使用 FormBuilder 对于表单,还可以使用它添加控件:

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

3

8

Trilok Singh 6 年前

简单使用:

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

4

3

ImFarhad 5 年前

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]
      });
    }
}