Question

我正在尝试将模型驱动形式迁移到反应形式。

这是一个动态表格，根据getCommandPacket中的数据进行填写 this.renderSvc.getCommandPacket-正在从服务器获取数据，这是函数签名：

服务器

..
 [HttpGet("[action]")]
        public Dictionary<string, string> GetCommandPacket(int ID){
..
}
..

HTML

<form>
  <div *ngFor="let key of commandKeys">
    <span class="ui-float-label">
      <textarea [id]="key" [name]="key" pInputTextArea [(ngModel)]="commandPacket[key]" style="width: 40em;"></textarea>
      <label [for]="key">{{ key }}</label>
    </span>
  </div>

  <p-button label="Add Field"></p-button>

  <button p-button type="submit" icon="fa fa-angle-right" iconPos="right">
    <span class="ui-button-text ui-clickable">Re-Submit</span>
  </button>
</form>

TS

...
export class CommandPacketDetailsComponent implements OnInit {
  @Input() id: number;
  myForm: FormGroup;

  constructor(private renderSvc: PfServerService, private fb: FormBuilder) {
  }

  commandPacket: { [key: string]: string; };
  commandKeys: string[];
  message: string = null;

  ngOnInit() {

    if (this.id !== 0 && typeof this.id !== "undefined")
      this.getCommandPacket(this.id);
    else
      this.message = "No ID Given for Packet"; 
  }

  getCommandPacket(id: number) {
    this.renderSvc.getCommandPacket(id).subscribe(data => {
      this.commandPacket = data;
      this.commandKeys = Object.keys(this.commandPacket);
    });
  }
...

如何以Reactive-form的方式获得相同的结果？

Answer 1

您要使用FormArray。声明表单并在其中声明formArray。然后，当您从服务中获取数据时，请根据需要创建尽可能多的formControl，并将它们添加到FormArray中。

您在这里有一个示例： https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

表单类型：

yourForm:FormGroup;

表单定义：

this.yourForm = this.fb.group({
      yourFormArray: this.fb.array([])
    });

为您的formArray吸气：

get yourFormArray(): FormArray {
    return this.cpForm.get('commands') as FormArray;
  }

，然后从服务器获取数据后：

this.yourFormArray.reset();
this.commandKeys.forEach(val =>
        this.yourFormArray.push(this.fb.group({ command: [''] }))
      );

将创建与s结果中的键一样多的命令（无input）formGroups（仅具有一个commandKeys字段）。

PS。设置好之后，您可以在patchValue上使用formArray来填充实际值。像这样：

this.myFormArray.patchValue(commandKeys.map(key => ({ command: key })));

PS2。

要从formarray清除表单控件，可以使用如下函数：

//Clear formArray
  clearItemsFormArray() {
    while (this.yourFormArray.length > 0)
      this.yourFormArray.removeAt(0);
  }

yourFormArray是来自getter的那个人。

用控件填充表单（根据服务返回的数据）

服务器

HTML

TS

1 个答案: