problem description

I have five Input under one FormArray. Clicking the add button will make push a new FormControl and have a Validator that verifies whether this input has the same value as the other four input . Now I don"t know how to make Angular correct, because the current verification is always true . So to verify is to verify whether you are equal to yourself.. I mean, there must be a FormControl which is itself of the newly added FormControl , so the result is that there is always a value equal to the one currently being verified. It seems that Angular always sets the value of FormControl first and then verifies it. For the time being, no solution has been found. Which god can tell me what to think?

the environmental background of the problems and what methods you have tried

Chrome,Angular6.

I have tried to find a value to determine whether the current FormControl can skip verifying only the remaining four, but I can"t find it and I don"t have any ideas.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

html:

    <div id="types" formGroupName="newTypes">
      <div class="addGroup">
        <div class="articleLabelDiv" *ngFor="let type of newTypes.controls; let i = index">
          <input type="text" class="simpleInput" [formControlName]="i">
          <button type="button" class="simpleButton" (click)="deleteType(i)"><mat-icon>close</mat-icon></button>
        </div>
      <button type="button" *ngIf="newTypes.length<5"  [disabled]="newTypes.invalid"  (click)="addType()" mat-raised-button color="primary"><mat-icon>add</mat-icon></button>
      </div>

Form Group:

    this.articleMsg = new FormGroup({
      title: new FormControl(this.data.article.title, ),
      labels: new FormArray([]),
      newTypes: new FormArray([]),
    });

validator: in component

  private isExistedValidator(checkName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      if (checkName === "label") {
        return this.labels.controls.every(label => {
          return label !== control;
        }) ? {"isExisted": true} : null ;

what result do you expect? What is the error message actually seen?

the expected result is that there are currently several input, how to verify that the values of these input are all different, and an error will be displayed as long as they are the same.