如何避免使用ngModel

问题描述

我已经坚持了几个小时，我需要一些帮助。我对棱角还很陌生。 我正在使用反应式表单，显示我的代码并解释我要完成的工作。

<mat-form-field>
  <mat-select [(ngModel)]="filterCate"
    placeholder="Cate" type="search" aria-label="Search" 
    formControlName="pro_cate_id"
    name="search" (focus)="getControl($event)">
    <mat-option *ngFor="let cate of categorias" [value]="cate.id">{{cate.name}}</mat-option>
  </mat-select>
  <button mat-button *ngIf="filterCate" matSuffix mat-icon-button aria-label="Clear"
    (click)="$event.stopPropagation(); deleteField('pro_cate_id')">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

我有一个ng-if，其中显示了一个按钮来重置该字段，并且仅当该字段中有值时才需要显示它。我收到错误 “类型'xxxComponent'上不存在属性'filterCate'”“ 我知道使用双向方法时，我需要该值存在于组件中，如果创建变量，就没有问题。但是我还有大约20个字段，而且似乎没有为所有字段创建20个变量。在这种情况下我该怎么办，如何在所有mat-form-field中都没有ng-model的情况下重构此代码？

解决方法

通常，在使用角度电抗形式时，在每个字段上写formControlName="xxxx"时，您已经具有控件与数据的绑定，因此您已经可以访问字段值。 如果您仍想将[(ngModel)]与<mat-select>一起使用，则可以将其与另一个*ngIf="filterCate"包裹在一起，以便[(ngModel)]在该属性存在之前不会呈现。

,

由于您将反应式表单与formControlName指令一起使用，因此根本不需要使用ngModel，因此可以从mat-select中删除它。

现在要获取表单控件pro_cate_id的值，您需要引用其表单组。大概在您的html中，您有类似的东西：

<element [formGroup]="form">
  ...
  <mat-form-field>
    ...
  </mat-form-field>
</element>

因此，form.controls['pro_cate_id'].value将为您提供mat-select控件的值，您可以像这样使用它：

<button *ngIf="form.controls['pro_cate_id'].value"></button>

此外，如果需要，您可以禁用按钮而不是完全将其删除：

<button [disabled]="!form.controls['pro_cate_id'].value"></button>