在 html 和组件文件中无需硬编码字段名称即可动态填充反应式表单字段名称和字段值

Question

大家好，在动态填充响应式表单方面需要一些小帮助。我从 API 获取数据，不确定那里有多少字段名称，我需要以反应形式填充数据，数据由 FIELD_NAME 和 FIELD_VALUE 组成。现在我可以通过使用表单生成器

来实现这一点

myForm = FormGroup
myForm = formbuilder.group({
 FIRST_NAME: new FormControl('', validator.required),
 LAST_NAME: new FormControl('', validator.required),
 FATHER_NAME: new FormControl('', validator.required),
})

and setting value for FIELD_VALUE

myForm.setValue({
FIRST_NAME: arrayList[0].FIELD_VALUE,
LAST_NAME: arrayList[1].FIELD_VALUE,
FATHER_NAME: arrayList[3].FIELD_VALUE
})

and in html 

<mat-form-field>
<mat-label> FIRST_NAME<mat-label>
<input matInput placeholder="FIRST_NAME" formControlName="FIRST_NAME">
</mat-form-field>
<mat-form-field>
<mat-label> LAST_NAME<mat-label>
<input matInput placeholder="LAST_NAME" formControlName="LAST_NAME">
</mat-form-field>

我不想在 ts 文件和 html 中对 FIELD_NAME 进行硬编码，

formBuilder.group{(
FIRST_NAME: new FormControl('', validator.required),
 LAST_NAME: new FormControl('', validator.required),
 FATHER_NAME: new FormControl('', validator.required),
)}

需要使用 FIELD_NAME 和 FIELD_VALUE 动态填充表单。谢谢

Answer 1

这是一个有趣的练习。

在您的组件中，初始化一个空表单组。
在 ngOnInit 方法中，获取您的 API 数据，遍历其键以
-> 使用键及其值
创建一个新控件 -> 将密钥推送到数组中以跟踪您的密钥

export class AppComponent implements OnInit {
  name = "Angular";
  form = this.formBuilder.group({}); // Create an empty form group
  apiData = {
    // Get you API data one way or the other
    FIRSTNAME: "John",
    LASTNAME: "Doe",
    FATHERNAME: "John Doe I"
  };
  formFields = []; // Array to keep track of form field keys

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.buildForm(); // Populate your form on component init
  }

  private buildForm() {
    for (const key in this.apiData) {
      // For each key
      this.form.addControl(key, new FormControl(this.apiData[key])); // Add a new control to your form
      this.formFields.push(key); // Push the key in an array
    }
  }
}

在您的模板中，将表单元素绑定到您的表单组，遍历您的键数组并使用它们设置 label 和 input 的 formControlName（不'忘记 [ ] 绑定到值）

<form [formGroup]="form">
    <!-- Iterate on your form field keys -->
    <label *ngFor="let field of formFields">
    {{field}} <!-- Use for label -->
    <input [formControlName]="field"> <!-- Bind to your form -->
  </label>
</form>

瞧！

Link to stackblitz

在 html 和组件文件中无需硬编码字段名称即可动态填充反应式表单字段名称和字段值

Dynamically populate reactive form field name & field value without hard coding field name in html and component file

angular

angular-reactive-forms

angular8