How to Add validatiors to formcontrol with reactive forms for matchip input from angular material

Question

I'm migrating to Angular 7 from angular 5 and i found that using ngmodel and formcontrolName in the same element is deprecated in Angular6 and removed in 7. Now I cannot set validators to my mat-chip input from angular material

html:

  <div class="form-group col-md-6">
        <label class="required"> User Names
          </label>
        <mat-form-field >
          <mat-chip-list class="form-control form-control-sm" 
          [ngClass]="{'is-invalid':form.controls.names.invalid && (form.controls.names.touched || form.controls.names.dirty) }"  
          #chipList3>
            <mat-chip *ngFor="let local of form.get('names').value" [removable]="removable"
              (remove)="remove_names(local)">
              {{local}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>
            <input [matChipInputFor]="chipList3"

              [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="add_names($event)" />
          </mat-chip-list>
        </mat-form-field>
      </div>

before migrating to angular 7 I would just use formControlName in the input tag like this

 <div class="form-group col-md-6">
        <label class="required"> User Names
          </label>
        <mat-form-field >
          <mat-chip-list class="form-control form-control-sm" 
          [ngClass]="{'is-invalid':form.controls.names.invalid && (form.controls.names.touched || form.controls.names.dirty) }"  
          #chipList3>
            <mat-chip *ngFor="let local of user.names" [removable]="removable"
              (remove)="remove_names(local)">
              {{local}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>
            <input [matChipInputFor]="chipList3"
          formControlName="names"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="add_names($event)" />
          </mat-chip-list>
        </mat-form-field>
      </div>

I do all my custom validations when the user pushes the name into the list but i want to chekc whether it is present or not for that i use Validators.required but now since i use the formcontrol value itself to display the list i cannot give any refernce to formControlName in the template

TS:

 user :FormGroup =this.fb.group({
    names:[[], [Validators.required]], 
    id:0
  });

Now even if there are values in the formControl it doesent satisfy Validators.required

After spending time in research I found that adding this

    this.form.controls['names'].updateValueAndValidity()

satisfied Validators.required but now i get this error

Error: No value accessor for form control with name: 'names'

Seyed-Amir-Mehrizi Seyed-Amir-Mehrizi · Accepted Answer · 2019-04-10T06:42:56

i know that your question is for angular material but you can simply replace with my code, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form : in html section:

  <form [formGroup]="myForm">
   <div class="form-group">
   <label for="name">first Name: </label>
   <input type="text" class="form-control" formControlName="firstName" id="name">
   <div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
   <div *ngIf="firstName.errors.required">filling name is required!</div>
   </div>
 </div>
 </form>

in ts file, you should implement the logic to conduct the validation.

in ts file:

  myForm = new FormGroup({
  'firstName':new FormControl('',Validators.required)

  })
    //getter method
   get firstName(){
   this.myForm.get('firstName');
   }

now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:

    /// invalid
  .form-control.ng-touched.ng-invalid{border:2px solid red;}

   ///valid
    .form-control.ng-touched.ng-invalid{border:2px solid green;}

with this technique is not required that you use ng class.

How to Add validatiors to formcontrol with reactive forms for matchip input from angular material

1 Answers