1

我创建了简单的 ValidatorFn 函数：

  requiredArrayLength(length: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (length >= 1) {
        return null;
      }
      else
        return { 'requiredArrayLength': true };
    }
  }

我正在尝试通过我的 formControl 使用它：

  createClientForm = new FormGroup({
    redirectUris: new FormControl(null, [this.requiredArrayLength(this.redirectUris.length)]),
    allowedScopes: new FormControl(null, [this.requiredArrayLength(this.allowedScopes.length)]),
    postLogoutUris: new FormControl(null, [this.requiredArrayLength(this.postLogoutUris.length)])
  });

这些数组不是空的，因为它们的值已成功显示在我的 mat-chip-list 中：

<mat-form-field appearance="fill" color="accent" class="field">
                <mat-label>Redirect URIs</mat-label>
                <mat-chip-list #redirectUrisList formControlName="redirectUris">
                    <mat-chip class="chip" *ngFor="let redirectUri of redirectUris"
                        (removed)="remove(redirectUri, 'redirectUri')">
                        {{redirectUri}}
                        <button matChipRemove>
                            <mat-icon>cancel</mat-icon>
                        </button>
                    </mat-chip>
                    <input placeholder="New redirect uri..." [matChipInputFor]="redirectUrisList"
                        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
                        (matChipInputTokenEnd)="add($event, 'redirectUri')">
                </mat-chip-list>
            </mat-form-field>

问题是我的 formControl 总是错误的，但是当我将 formControlName 分配给 input 而不是 mat-chip-list 时，即使列表中没有项目，它也总是没有错误。

4

0 回答 0