Angular 7填充表单输入

Question

我在填充formGroup中填充数据的问题

中有问题。

我有一个有很多数据的可变公司。

我与所有这些数据一起制作一个formgroup：

this.EditCoForm = this.formBuilder.group({
      coid: ['', [Validators.required]],
      coname: ['', [Validators.required]],
      service: [null,],
      address: ['', [Validators.required]],
      state: ['', [Validators.required]],
      zip: ['', [Validators.required]],
      city: ['', [Validators.required]],
      country: ['', [Validators.required]],
      size: [null, [Validators.required]],
      domain: [null, [Validators.required]],
      duns: [null,],
      tid1: ['', [Validators.required]],
      numid1: ['', [Validators.required]],
      tid2: [null,],
      numid2: [null,],
      tid3: [null,],
      numid3: ['',],
      bankname: ['', [Validators.required]],
      bicswift: ['', [Validators.required]],
      iban: ['', [Validators.required]],
      bogid: [,[Validators.required]],
});

我想在EditCoform和HTML文本输入字段中从变量" Company"中放置值。

<div class="form-field">
   <label class="text-white">ID</label>
   <br>
   <input formControlName="coid" value="company.coid">
</div> 

在HTML页面上，我们必须重视" company.coid"，但在提交时编辑中，它是'。

所以如何处理：（我是angular中的菜鸟）EditCoform＆amp;在HTML字段中？

非常感谢您的帮助。

Answer 1

我想在EditCoform和HTML文本输入字段中从变量" Company"中放置值。

创建表单组时，您需要将这些值（来自company）放置：

// suppose company is
company = {
  coid: 'coid',
  coname: 'coname'
}
this.EditCoForm = this.formBuilder.group({
  coid: [this.company.coid, [Validators.required]],
  coname: [this.company.coname, [Validators.required]],
  ...

然后，两种形式都具有适当的名称和输入值（在html模板中）的控件，将具有company的值：

<form [formGroup]="EditCoForm">
  <div class="form-field">
  <label class="text-white">ID</label><br>
    <input formControlName="coid">
  </div>
 ...  
</form>

或，如果创建表单组时不可能执行此操作，您还可以以这种方式设置表单组的值：

this.EditCoForm.setValue({
  coid: this.company.coid,
  coname: this.company.coname,
  ...
});

这是Stackblitz