Question

我现在正在用角度框架实现动态形式。此表单具有ADD按钮，可以将2个新的输入字段作为一行插入到此表单中。每个输入字段都有一个验证功能，如果validate true，将激活SAVE按钮。

但是现在我有一个问题。如果我双击此ADD按钮，并插入2行和4个输入字段（每行2个输入字段）。如果第一行或第二行所有输入字段均已填写，则所有表格均有效。

但是我要保证的是，如果所有2行（含4个输入字段）都被填写，则该表格将是有效的。

代码：父组件HTML：

 $students[$key] = array('key' => $key, 'name' => $name, 'occ' => $occ);

foreach ( $students as $value ) {
    $phase= "Not found";
    $enroll= "";
    if ( $value["key"] == $find ) {
        $phase= $value["name"] . "(" . $value["key"] . "):";
        $enroll = ( $value["occ"] == "1" ) ? " yes" : "no";
    }
    echo "$phase $enroll";
}

父项ts

  <app-dynamic-filter-content [node]="node" (selectedValueChange)="onSelectedValueChange(node)"
                                    (formStatusChanged)="onFormStatusChanged($event)"></app-dynamic-filter-content>
<div class="dynamic-filter-add-delete-button">
          <button
            mat-icon-button
            (click)="addNewItem(node)">
            <mat-icon>add</mat-icon>
          </button>
          <button
                  mat-icon-button
                  (click)="remove(node)"
                  class="dynamic-filter-delete-button">
            <mat-icon>delete</mat-icon>
          </button>
  </div> 
 <button mat-button color="primary" (click)="onSaveData()" [disabled]="isInvalidData">Save</button>

和子组件

  public onFormStatusChanged(invalid: boolean): void {
    this.isInvalidData = invalid;
  }

添加子组件ts

<form  [formGroup]="filterForm">
      <mat-form-field appearance="legacy">
        <input matInput type="text" [formControl]="predicateField"  [(ngModel)]="node.field" [name]="node.id"
               [matAutocomplete]="auto" placeholder="Field" required />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let field of filterFields" [value]="field.value">
            {{field.value}}
          </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="predicateField.invalid">Field is required</mat-error>
      </mat-form-field>
      <span style="padding-left: 10px"></span>
      <mat-form-field appearance="legacy">
        <input matInput type="text" [(ngModel)]="node.value" [formControl]="predicateValue"
               [matAutocomplete]="predicateValueAC" placeholder="Value" required />
        <mat-autocomplete #predicateValueAC="matAutocomplete">
          <mat-option *ngFor="let option of filterValues" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="predicateValue.invalid">Value is required</mat-error>
      </mat-form-field>
    </ng-container>
  </form>

当前结果是

因此从此图片中，您可以看到“保存”按钮处于活动状态，如果第一行的所有字段均已填写。

任何解决方案？

如何使用动态输入字段验证角度形式

0 个答案: