0

我有多个在ngFor循环中生成的角度形式，如下所示。每个表格都是一个向导步骤，用户可以通过单独填写表格来前进。在表单输入字段中，我添加了自定义属性，该属性通过动态建筑物名称保存错误消息。我正在努力的是在单击 Next 时显示与 formControl 相关的错误消息，因为我无法从 FormControl 中获取 Native 元素。

 <div *ngFor="let building of buildings;let i = index" > 
   <form #childForms="ngForm" name="{{building.id}}" id="{{building.id}}" >
<input [attr.errorLabel]="'please name of the ' + building.Class " [name]="i + 'buildingName'" type="text" [(ngModel)]="building.Name"  class="text-iput" [required]="true">
   </form>  
 </div>


<button styleClass="action" label="Next" (onClick)="goNext(activeStep)"></button>

下面是我如何尝试从 TS 文件中获取当前步骤并尝试手动调用验证

   activeStep : number = 0;
   @ViewChildren('childForms', {read: NgForm}) childForms: QueryList<NgForm>;

   goNext(activeStep) {

     errors = [];
     for (const name in this.childForms[activeStep].controls) {
         if (this.childForms[activeStep].controls[name].invalid) {
            // How Can I get the ATTRIBUTE associated with the form control here
             // any way that i can get the native element of the Form Control
             // in my case [attr.errorLabel]="'please name of the ' + building.Class "
         }
     }
  }
4

1 回答 1

1

您可以在输入中使用模板引用变量（我还建议输入的名称与控件的名称（*）相同）

<input #input [attr.errorLabel]="..." [name]="building.Name'" ...>

那么你可以使用

@ViewChildren('input',{read:ElementRef}) inputs:Query<ElementRef>

然后你可以使用一些像

if (this.childForms[activeStep].controls[name].invalid) {
    const input=this.inputs.find(x=>x.nativeElement==name)
    const attr=input.nativeElement.getAttribute('errorLabel')
    ....
}

(*)如果只有输入并且您不能更改您可以使用的名称

let i=0;
for (const name in this.childForms[activeStep].controls) {
    if (this.childForms[activeStep].controls[name].invalid) {
        const input=this.inputs.find((x,index)=>index==i)
        const attr=input.nativeElement.getAttribute('errorLabel')
        ....
    }
    i++;
}

注意：您应该检查输入是否存在以避免错误。您可以使用三元运算符

    const attr=input?input.nativeElement.getAttribute('errorLabel'):null
于 2022-02-06T12:15:57.283 回答