Question

想知道是否可以为FormControl（在组件中）添加占位符文本，这是我的代码：

(this.paramsForm.get(
        'parameters'
      ) as FormArray).push(new FormControl('', [Validators.required]));

以html渲染

<div  *ngFor="let formControl of paramsForm.get('parameters').controls">
  <mat-form-field appearance="outline" class="block push-bottom">
    <input
      matInput
      type="text"
      [formControl]="formControl" //TODO
      placeholder="formControl" //TODO
    />
  </mat-form-field>
</div>

答案here很有帮助，但就我而言，拥有一个对象数组（{controlName:'name', value:'', placeholder: 'Enter name'}, {controlName:'email', value:'', placeholder: 'Enter email'}）可动态创建控件并为每个控件设置占位符文本。谢谢！

Answer 1

@Eliseo评论后，将占位符文本保留在数组中，结果如下：

我的JSON对象：

exportParameters：[groupTitle：“导出组”，参数：[{key：'username'，value：”，displayName：'Enter user name'}，key：'password'，value：' '，displayName：'输入密码'}]]

在component.ts中，创建了一个组

placeholders: string[] = [];

this.paramsForm = this.formBuilder.group({
exportParameters: this.fb.group({
      parameters: this.fb.array([])
    })
})


this.exportParameters.parameters.forEach( (param,index) => {
(this.paramsForm.get('exportParameters.parameters') as FormArray).push (new FormControl('',[Validatrors.required]));
this.placeholders[index] = param.displayName;
})

在组件的html中：

<div *ngFor="let formControl of paramsForm.get('exportParameters.parameters').controls; let i = index;">

<mat-form-field>
<input type="text" placeholder = "{{ placeholders[i] }}" />
</mat-form-field>
</div>

希望这对某人有帮助！

在FormArray中添加控件时，可以设置FomControl的placehoder吗？

1 个答案: