如何避免使用ngModel答案

【问题标题】：How can avoid the use of ngModel如何避免使用ngModel
【发布时间】：2020-10-13 20:21:28
【问题描述】：

我已经被困在某事上几个小时了，我需要一些帮助。我对角度很陌生。我正在使用响应式表单，展示我的代码并解释我想要完成的工作。

<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 的情况下重构这段代码？

【问题讨论】：

标签： angular typescript angular-reactive-forms formbuilder angular2-ngmodel

【解决方案1】：

由于您使用的是带有 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>

【讨论】：

这几乎就是我想要的！同样在控制台中，我收到了 ng-model 和 formControl 的警告消息，现在我更了解为什么它会被弃用。目前，这是对我有用的解决方案，我真的很感激。我的功能只是重置该字段，而不是完全删除它。 ` deleteField(control_name:any){ this.form.controls[control_name].reset(); } `

【解决方案2】：

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

【讨论】：

我不知道不使用 ng-model 就可以获得价值，也许我没有完全理解它是如何工作的。我很欣赏这个答案，它可以很好地为我提供指导