时间戳

首页 > 解决方案 > 在FormArray中添加控件时可以设置FomControl的占位符吗？

angular - 在FormArray中添加控件时可以设置FomControl的占位符吗？

问题描述

想知道我是否可以为（组件中）添加占位符文本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>

这里的答案很有帮助，但在我的情况下，有一个对象数组 ( {controlName:'name', value:'', placeholder: 'Enter name'}, {controlName:'email', value:'', placeholder: 'Enter email'}) 来动态创建控件并为每个控件设置占位符文本。谢谢！

标签： angularformarrayformgroups

解决方案

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

我的 JSON 对象：

exportParameters: [groupTitle:'Export Group', parameters:[{key:'username', value:'', displayName:'输入用户名'}, 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>

希望这对某人有帮助！

推荐阅读