title: How to Add validatiors to formcontrol with reactive forms for matchip input from angular material
body: <p>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 </p>
  
  <p>html:</p>
  
  <pre><code>  &lt;div class="form-group col-md-6"&gt;
          &lt;label class="required"&gt; User Names
            &lt;/label&gt;
          &lt;mat-form-field &gt;
            &lt;mat-chip-list class="form-control form-control-sm" 
            [ngClass]="{'is-invalid':form.controls.names.invalid &amp;&amp; (form.controls.names.touched || form.controls.names.dirty) }"  
            #chipList3&gt;
              &lt;mat-chip *ngFor="let local of form.get('names').value" [removable]="removable"
                (remove)="remove_names(local)"&gt;
                {{local}}
                &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
              &lt;/mat-chip&gt;
              &lt;input [matChipInputFor]="chipList3"
  
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add_names($event)" /&gt;
            &lt;/mat-chip-list&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>before migrating to angular 7 I would just use formControlName in the input tag like this </p>
  
  <pre><code> &lt;div class="form-group col-md-6"&gt;
          &lt;label class="required"&gt; User Names
            &lt;/label&gt;
          &lt;mat-form-field &gt;
            &lt;mat-chip-list class="form-control form-control-sm" 
            [ngClass]="{'is-invalid':form.controls.names.invalid &amp;&amp; (form.controls.names.touched || form.controls.names.dirty) }"  
            #chipList3&gt;
              &lt;mat-chip *ngFor="let local of user.names" [removable]="removable"
                (remove)="remove_names(local)"&gt;
                {{local}}
                &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
              &lt;/mat-chip&gt;
              &lt;input [matChipInputFor]="chipList3"
            formControlName="names"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add_names($event)" /&gt;
            &lt;/mat-chip-list&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>TS:</p>
  
  <pre><code> user :FormGroup =this.fb.group({
      names:[[], [Validators.required]], 
      id:0
    });
  </code></pre>
  
  <p>Now even if there are values in the formControl it doesent satisfy Validators.required</p>
  
  <p>After spending time in research I found that adding this </p>
  
  <pre><code>    this.form.controls['names'].updateValueAndValidity()
  </code></pre>
  
  <p>satisfied Validators.required but now i get this error</p>
  
  <pre><code>Error: No value accessor for form control with name: 'names'
  </code></pre>