1

I created simple ValidatorFn function:

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

and i'm trying use this by my 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)])
  });

These arrays aren't empty, because their values are successfully displayed in my 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>

The problem is that my formControl is always wrong, but when I assign formControlName to input instead of mat-chip-list, it's always without wrongs even when there are no items in the list.

7
  • 1
    Before if (length >= 1) block, add console.log(length) and see what gets printed. If this.redirectUris was an empty array when FormControl was created, then you will get length as 0. Commented Jan 28, 2022 at 17:58
  • Yes, it's 0. So I must update reference after add/remove element to this.redirectUris, yes? Commented Jan 28, 2022 at 18:13
  • 1
    See if this answer helps Commented Jan 28, 2022 at 18:21
  • I do this: pastebin.com/AW6naSa0 and it's still same effect. What I am doing wrong? Commented Jan 28, 2022 at 19:15
  • 1
    I don't think the issue is with the validator, but how the form controls are being used. There are already couple of questions: stackoverflow.com/q/53483323/9471852, stackoverflow.com/q/56492325/9471852. See if those are helpful in your case, else please share a Stackblitz minimal reproducible example of the issue. Commented Jan 29, 2022 at 4:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.