如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入

Posted 2023-03-13

【中文标题】如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入

【英文标题】：How to Add validatiors to formcontrol with reactive forms for matchip input from angular material

【发布时间】：2019-08-31 12:49:58

【问题描述】：

我正在从 Angular 5 迁移到 Angular 7，我发现在同一元素中使用 ngmodel 和 formcontrolName 在 Angular6 中已被弃用，并在 7 中被删除。现在我无法将验证器设置为来自 Angular 材料的 mat-chip 输入

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

现在即使 formControl 中有值，它也不满足 Validators.required

花时间研究后，我发现添加这个

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

满足 Validators.required 但现在我收到此错误

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

【参考方案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-invalidborder:2px solid red;

   ///valid
    .form-control.ng-touched.ng-invalidborder:2px solid green;       

使用这种技术不需要使用 ng 类。

【讨论】：

感谢您的回答，但您的方法仅适用于正常输入。 mat-chip 输入有所不同，您不能将 formControlName 添加到输入字段。