代码之家 › 专栏 › 技术社区 › E.Meir

用控件填写表单(根据从服务返回的数据)

primeng angular5 angular asp.net-mvc

E.Meir · 技术社区 · 6 年前

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

这是一个动态表单,根据来自 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 怎么了?

1 回复 | 直到 6 年前

tlt 6 年前

你想用 FormArray . 申报表及其内部申报 formArray .然后,当您从服务获取数据时,创建尽可能多的 formControl 因为你有结果并将其添加到 福尔马雷 是的。

这里有一个例子: 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([])
    });

为你的 福尔马雷 以下内容:

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 字段)因为您的 commandKeys 结果。

附言。一旦你设置好你就可以使用 patchValue 在 福尔马雷 用实际值填充。类似于:

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

第2页。

要从formarray中清除窗体控件,可以使用以下函数:

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

yourFormArray 那个是从 getter .