如何避免使用 ngModel

Question

我在某件事上被困了几个小时，我需要一些帮助。我是 angular 的新手。我正在使用响应式表单，展示我的代码并解释我想要完成的事情。

<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，其中显示了一个用于重置字段的按钮，我只需要在字段中有值时显示它。我收到错误 "属性 'filterCate' does not exist on type 'xxxComponent'" 我知道通过双向方式我需要该值存在于组件中，如果我创建变量就没有问题。但是我还有大约 20 个字段，而且我似乎没有为所有字段创建 20 个变量。在这种情况下我能做什么，我怎么能在所有 mat-form-field 中没有 ng-model 的情况下重构这段代码？

Answer 1

通常在使用 angular 响应式表单时，当您在每个字段上写入 formControlName="xxxx" 时，您已经拥有控件与数据的绑定，因此您已经可以访问字段值。如果您仍想将 [(ngModel)] 与 <mat-select> 一起使用，您可以将其与另一个 *ngIf="filterCate" 包裹起来，这样 [(ngModel)] 将不会呈现，直到此属性存在.

Answer 2

由于您在 formControlName 指令中使用反应式表单，因此根本不需要使用 ngModel，因此您可以将其从 mat-select.[=19 中删除=]

现在要获取表单控件的值 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>

如何避免使用 ngModel

How can avoid the use of ngModel

formbuilder

typescript

angular2-ngmodel

angular

angular-reactive-forms