如何将validatiors添加到formcontrol，并使用反应式表单从Angle material输入matchip

Question

我正在从Angular5迁移到Angular7，我发现在同一个元素中使用ngmodel和formcontrolName在Angular6中被弃用，在Angular7中被删除。现在，我无法将验证器设置为来自角度材料的mat芯片输入

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>

在迁移到角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>

我做我所有的自定义验证时，用户将名称推入列表，但我想chekc是否存在或不，我使用Validators.required但现在，因为我使用formControl值本身来显示列表，我不能在模板中给出对formControlName的任何引用

TS:

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

现在，即使在formControl中有值，它也不满足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类。