Question

我在FormGroup的Input中填充数据时遇到问题。

我有一个可变公司，里面有很多数据。

我使用所有这些数据创建一个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]],
});

我想将变量“ Company”的值放在EditCoForm和HTML文本输入字段中。

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

在HTML页面上，我们必须设置值为“ company.coid”，但在“提交时在EditCoForm中”为“

”。

所以如何处理：（我是Angular的菜鸟） EditCoForm和HTML字段中的“公司”值？

非常感谢帮助。

Answer 1

我想将变量“ Company”的值放在EditCoForm和HTML文本输入字段中。

创建表单组时，您需要放置这些值（来自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

Angular 7填充表格输入

1 个答案: