超過動態formArray中的maxLength后如何顯示錯誤訊息？

我有一個動態表單陣列，單擊添加按鈕后，我正在添加動態欄位。我正在嘗試對動態表單欄位之一使用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 is not a function OR Parser Error: Unexpected token [, expected identifier or keyword at column 29 in [script_file_content.errors?.['maxLength']]

下面是我的代碼

組件.html

<form [formGroup]="workflowAddForm" >
        <div >
          <div >
            <mat-form-field  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 >
          <ng-container formArrayName="runnerNodes" *ngFor="let nodes of workflowAddForm.get('runnerNodes')['controls']; let i = index;">
            <div  [formGroupName]="i">
              <div >
                <mat-form-field  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 >
                <mat-form-field  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  *ngIf="i != 0">
                <i  matTooltip="Remove" (click)="removeRunner(i)" style="color:red;">delete</i> 
              </div>
            </div>
            
          </ng-container>
          
          <div  *ngIf="runnerNodeLength !== 2"> 
            <i  matTooltip="Add Script" (click)="addMoreRunner()"  style="color: #017CAD;">add_circle_outline</i> 
          </div>
          <div >
            <div >
              <mat-form-field  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 >
              <mat-form-field  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 >
          <div >
            <mat-form-field  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;
  }

任何幫助表示贊賞。

uj5u.com熱心網友回復：

您不需要從頂部表單中獲取對控制元件的參考。由于您正在回圈瀏覽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錯誤鍵全部為小寫。

干杯

uj5u.com熱心網友回復：

我犯了兩個愚蠢的錯誤

1. 未正確訪問驗證器欄位。它應該像

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

2. .hasError() 中的CamelCase maxLength 。應該是小盒子.hasError('maxlength')

標籤：有角度的验证角反应形式

上一篇：如何在FlutterDart中創建混合大小寫和數字的驗證規則

下一篇：驗證Java中是否填充了所有字串