Как добавить валидаторы в formcontrol с реактивными формами для ввода совпадений из углового материала

Question

Я перехожу на Angular 7 с Angular 5, и я обнаружил, что использование ngmodel и formcontrolName в одном и том же элементе устарело в Angular6 и удалено в 7. Теперь я не могу установить валидаторы на вход моей матрицы-микросхемы из углового материала

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>

перед переходом на angular 7 Я бы просто использовал formControlName во входном теге, как этот

 <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>

Я делаю все свои пользовательские проверки, когда пользователь нажимаетимя в списке, но я хочу проверить, присутствует оно или нет для этого, я использую Validators.required, но теперь, так как я использую само значение formcontrol для отображения списка, я не могу дать ссылку на formControlName в шаблоне

TS:

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

Теперь, даже если в форме есть значения, которые он должен удовлетворять, Validators.required

Потратив время на исследования, я обнаружил, что добавление этого

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

удовлетворен Validators.required, но теперь я получаю эту ошибку

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

Answer 1

Я знаю, что ваш вопрос относится к угловому материалу, но вы можете просто заменить его моим кодом, но это лучший способ проверить поле ввода управления формой с помощью метода реактивной формы и начальной загрузки 4 для отображения проверки. сначала вам нужно написать код для вашей формы: в разделе html:

  <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>

в файле ts, вы должны реализовать логику для проведения проверки.

в файле ts:

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

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

теперь вы можете видеть, что проверка работает. Теперь, чтобы придать стиль полю ввода, чтобы показать красную рамку вокруг неверного ввода, просто перейдите в файл css компонента и добавьте этот класс в файл css:

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

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

с этой техникой не требуется, чтобы вы использовали класс ng.