如何在动态formArray中显示超过maxLength后的错误消息

Question

我有一个动态表单数组，单击添加按钮后，我将添加动态字段。我正在尝试对动态表单的一个字段使用maxLength验证。从技术上讲，它是有效的，但如果字段无效，我想显示错误消息。

我已经尝试了以下条件来显示错误消息：

<mat-hint *ngIf="workflowAddForm.controls.runnerNodes['controls'][i].hasError('maxLength', 'script_file_content')">Max 7 characters</mat-hint>
OR
<mat-hint *ngIf="workflowAddForm.get('runnerNodes')['controls'][i].value['script_file_content'].hasError('maxLength')">Max 7 characters</mat-hint>
OR
<div *ngIf="script_file_content.errors?.['maxLength']">Max 7 characters</div>

但我遇到了类似hasError不是函数的错误或分析器错误：[script_file_content.errors？.['maxLength']]中第29列的意外标记[，预期标识符或关键字

下面是我的代码

component.html

<form [formGroup]="workflowAddForm" class="form-cont">
<div class="col-lg-12 row p-0">
<div class="form-field-cont col-lg-6">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Name</mat-label>
<input matInput  placeholder="Workflow Name" formControlName="workflow_name" required>
</mat-form-field>
</div>
</div>
<div class="col-lg-12 row p-0">
<ng-container formArrayName="runnerNodes" *ngFor="let nodes of workflowAddForm.get('runnerNodes')['controls']; let i = index;">
<div class="col-lg-6" [formGroupName]="i">
<div class="form-field-cont runnerFields">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Script Name</mat-label>
<input matInput  placeholder="sample.py" formControlName="script_name" required>
</mat-form-field>
</div>
<div class="form-field-cont">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Script file content</mat-label>
<textarea matInput placeholder="Script file content" formControlName="script_file_content" style="height:200px" required></textarea>
<!-- <mat-hint *ngIf="workflowAddForm.controls.runnerNodes['controls'][i].hasError('maxLength', 'script_file_content')">Max 7 characters</mat-hint> -->
<!-- <mat-hint *ngIf="workflowAddForm.get('runnerNodes')['controls'][i].value['script_file_content'].hasError('maxLength')">Max 7 characters</mat-hint> -->
<!-- <div *ngIf="script_file_content.errors?.['maxLength']">Max 7 characters</div> -->
</mat-form-field>
</div>
<div class="deleteIcon" *ngIf="i != 0">
<i class="material-icons cursor-pointer" matTooltip="Remove" (click)="removeRunner(i)" style="color:red;">delete</i> 
</div>
</div>

</ng-container>

<div class="AddIcon" *ngIf="runnerNodeLength !== 2"> 
<i class="material-icons cursor-pointer mt-1" matTooltip="Add Script" (click)="addMoreRunner()"  style="color: #017CAD;">add_circle_outline</i> 
</div>
<div class="col-lg-6">
<div class="form-field-cont runnerFields">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Config File Name</mat-label>
<input matInput  placeholder="config.json" formControlName="config_name">
</mat-form-field>
</div>
<div class="form-field-cont">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Config file content</mat-label>
<textarea matInput placeholder="Config file content" formControlName="config_file_content" style="height:200px"></textarea>
</mat-form-field>
</div>
</div>
</div>
<div class="col-lg-12 row p-0">
<div class="form-field-cont col-lg-6">
<mat-form-field class="col-lg-12" appearance="outline"  [floatLabel]="'always'" [hideRequiredMarker]="false">
<mat-label>Executer Command</mat-label>
<input matInput  placeholder="python3 filename.py" formControlName="executer_command" required>
</mat-form-field>
</div>
</div>
</form>

组件.ts

createWorkflowAddFormBuilderObj(){
this.workflowAddForm = this.formBuilder.group({
workflow_name: '',
runnerNodes: this.formBuilder.array([ this.createRunnerNode() ]),
executer_command: '',
config_name: '',
config_file_content: ''
});
}
createRunnerNode(): FormGroup {
return this.formBuilder.group({
script_name: '',
script_file_content: ['', [Validators.required, Validators.maxLength(7)]]
});
}
addMoreRunner(){
this.runnerNodes = this.workflowAddForm.get('runnerNodes') as FormArray;
this.runnerNodes.push(this.createRunnerNode());
this.runnerNodeLength = this.runnerNodes.controls.length;
}
removeRunner(index){
(this.workflowAddForm.get('runnerNodes') as FormArray).removeAt(index);
this.runnerNodeLength = this.runnerNodes.controls.length;
}

感谢您的帮助。

Answer 1

您不需要从顶部表单获取对控件的引用。由于您正在循环使用模板中的FormArray控件：

<ng-container ... *ngFor="let nodes of workflowAddForm.get('runnerNodes')['controls']; ...">

在nodes变量中，您已经有了对每个节点FormGroup的引用(考虑将变量重命名为节点(

从那里，您只需要使用get()方法来获取script_file_content控件并检查它是否有错误。

<mat-hint *ngIf="nodes.get('script_file_content').hasError('maxlength')">

还要注意，maxlength错误键都是小写的。

干杯

Answer 2

我犯了两个愚蠢的错误

1. 未正确访问验证器字段。应该是这样

<mat-error *ngIf="workflowAddForm.get('runnerNodes')['controls'][i].controls['script_file_content'].hasError('maxlength')">Max 7 characters</mat-error>

2. CamelCasemaxLength内部.hasError((。它应该是小写.hasError('maxlength')