如何迭代formbuilder.group控件？

Question

打字稿

formGroup = this.fb.group({});

constructor(private readonly formBuilder: UntypedFormBuilder){}

ngOnInit() { this.setControls(); }


settControls() {
 this.formGroup.addControl('name', this.fb.control('', Validators.required));
 this.formGroup.addControl('age', this.fb.control('', Validators.required));
 this.formGroup.addControl('alias', this.fb.control('', Validators.required));
}

HTML

<ng-container *ngFor="let control of formGroup.controls">
  //show some formcontrol or component
</ng-container>

我已经尝试过

ngFor

但这不起作用，因为表单生成器组是一个对象而不是数组。我知道有一个 formarray 但这不是正确的方法。

如何迭代表单组控件？

Answer 1

控件属于类型

controls: ɵTypedOrUntyped<TControl, TControl, {
    [key: string]: AbstractControl<any>;
}>

因此你必须使用

keyvalue

pipe

来迭代它

<ng-container *ngFor="let control of formGroup.controls | keyvalue">
    {{ control.key }}   // control.name
    {{ control.value }} // control.value
</ng-container>