Angular 8 multiple validators not working-CodePudding

I have a reactive form control and it has more than 1 validator. I defined it as the below methods and none of it's not actually validating it. below is the code which I tried.

1 method

civilIdNumber: new FormControl("", Validators.compose([Validators.required, Validators.minLength(12), Validators.maxLength(12), Validators.pattern("^[0-9]*$")])),

2 method

civilIdNumber: new FormControl("",[Validators.required, Validators.minLength(12), Validators.maxLength(12), Validators.pattern("^[0-9]*$")])

Html Code

<form [formGroup]="customerForm">
    <div class="col-sm-6">
              <div class="form-group">
                <label for="civil">Civil ID Number</label>
                <input
                  type="number"
                  placeholder="Civil ID Number"
                  class="form-control"
                  id="civil"
                  formControlName="civilIdNumber"
                  required
                  [ngClass]="{ 'is-invalid': customerForm.controls.civilIdNumber.invalid && customerForm.controls.civilIdNumber.touched }"
                />

                <div *ngIf="customerForm.controls['civilIdNumber'].invalid && (customerForm.controls['civilIdNumber'].dirty || customerForm.controls['civilIdNumber'].touched)" class="text-danger">
                  <div *ngIf="customerForm.controls['civilIdNumber'].errors.required">Civil ID Number required</div>
                </div>
              </div>
     </div> 
</form>

CodePudding user response：

You are not binding your control properly. Form control name makes sense only in context of formGroup parent (or formArray but lest skip that)

<div class="col-sm-6" [formGroup]="customerForm"> <!-- this makes it work -->
          <div class="form-group">
            <label for="civil">Civil ID Number</label>
            <input
              type="number"
              placeholder="Civil ID Number"
              class="form-control"
              id="civil"
              formControlName="civilIdNumber"
              required
              [ngClass]="{ 'is-invalid': customerForm.controls.civilIdNumber.invalid && customerForm.controls.civilIdNumber.touched }"
            />

            <div *ngIf="customerForm.controls['civilIdNumber'].invalid && (customerForm.controls['civilIdNumber'].dirty || customerForm.controls['civilIdNumber'].touched)" class="text-danger">
              <div *ngIf="customerForm.controls['civilIdNumber'].errors.required">Civil ID Number required</div>
            </div>
          </div>
</div>

CodePudding user response：

In your .ts

customerForm: FormGroup;
constructor(formBuilder: FormBuilder) {
this.customerForm = this.formBuilder.group(
   {
    civilIdNumber: ["", [Validators.required, Validators.minLength(12), 
    Validators.maxLength(12), Validators.pattern("^[0-9]*$")] ]
   }
)
}

In your .html

<div class="col-sm-6" [formGroup]="customerForm"> <!-- this makes it work -->
          <div class="form-group">
            <label for="civil">Civil ID Number</label>
            <input
              type="number"
              placeholder="Civil ID Number"
              class="form-control"
              id="civil"
              formControlName="civilIdNumber"
              required
              [ngClass]="{ 'is-invalid': customerForm.get('civilIdNumber').invalid && customerForm.get('civilIdNumber').touched }"
            />

            <div *ngIf="customerForm.get('civilIdNumber').invalid && (customerForm.get('civilIdNumber').dirty || customerForm.get('civilIdNumber').touched)" class="text-danger">
              <div *ngIf="customerForm.get('civilIdNumber').errors.required">Civil ID Number required</div>
            </div>
          </div>
</div>