Angular validator is stuck on pending-CodePudding

I am using Angular reactive form validation and on an the name input it remains stuck on pending after I pass the touched validation

I could not find any problem in the code itself or why the name input does this when the other inputs with validation are fine

this is in the ts file:


ngOnInit(): void {
    this.signupForm = this.formBuilder.group({
      name: [
        '',
        [
          Validators.required,
          Validators.minLength(3),
          Validators.pattern('^[a-zA-Z ]*$'),
        ],
      ],
      familyName: [
        '',
        [
          Validators.required,
          Validators.minLength(3),
          Validators.pattern('^[a-zA-Z ]*$'),
        ],
      ],
      number: [
        '',
        Validators.required,
        Validators.pattern('[0-9]{3} [0-9]{3} [0-9]{3}'),
      ],
      email: ['', [Validators.required, Validators.email]],
      password: [
        '',
        [
          Validators.required,
          Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
        ],
      ],
    });
  }

HTML file:

<div >
  <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <label for="name">Name </label>
    <input
      formControlName="name"
      type="text"
      name="name"
      id="name"
      placeholder="Name"
    />
    <div  *ngIf="name?.touched && name?.invalid">
      Name is not valid
    </div>
    <label for="familyName">Family Name </label>
    <input
      formControlName="familyName"
      type="text"
      name="familyName"
      id="familyName"
      placeholder="Family Name"
    />
    <div
      
      *ngIf="familyName?.touched && familyName?.invalid"
    >
      Family Name is not valid
    </div>
    <label for="number">Phone number </label>
    <input
      formControlName="number"
      type="text"
      name="number"
      id="number"
      placeholder="Phone number"
    />
    <div  *ngIf="number?.touched && number?.invalid">
      Phone Number is not valid
    </div>
    <label for="email">Email </label>
    <input
      formControlName="email"
      type="text"
      name="email"
      id="email"
      placeholder="email"
    />
    <div  *ngIf="email?.touched && email?.invalid">
      Email is not valid
    </div>
    <label for="password">Password </label>
    <input
      formControlName="password"
      type="text"
      name="password"
      id="password"
      placeholder="password"
    />
    <div  *ngIf="password?.touched && password?.invalid">
      Password should have minimum 8 characters, at least 1 uppercase letter, 1
      lowercase letter and 1 number
    </div>
    <input  type="submit" />
  </form>
</div>

and in the console after writing a letter in the name input:

<input _ngcontent-sfk-c51="" formcontrolname="productName" type="text" productname="productName" id="productName" placeholder="productName" ng-reflect-name="productName" >

CodePudding user response：

You're missing a array form your number control.

  number: [
    '',
    [
      Validators.required,
      Validators.pattern('[0-9]{3} [0-9]{3} [0-9]{3}'),
    ]
  ],

If you don't pass an array, the 3 parameter is considered an AsyncValidtorFn.