如何使用双向绑定以及模板驱动的表单验证设置 Angular2 模板驱动表单元素答案

【问题标题】：How set up Angular2 Template Driven form element with two-way binding as well as template driven form validation如何使用双向绑定以及模板驱动的表单验证设置 Angular2 模板驱动表单元素
【发布时间】：2020-07-09 10:42:37
【问题描述】：

如何正确设置 Angular 模板驱动的表单元素以同时进行模板驱动验证和双向绑定？有可能吗？

我尝试了几种使用 ngModel 的不同方法，但似乎无法让双向绑定工作，没有一些缺点。我确定我错过了一些愚蠢的东西。

当我按照下面的示例使用[(ngModel)]="city" 以及#city="ngModel" 时，我收到以下错误：

错误：无法将值“$event”分配给模板变量“city”。模板变量是只读的。

元素设置：

<div class="form-group col-md-3 mr-3">
  <label
    [class.error-label]="!city1.valid && city1.touched"
    for="city"
    >City or Town*
  </label>
  <input
    type="text"
    id="city"
    ngModel
    name="city"
    required
    #city="ngModel"
    [(ngModel)]="city"
  />
  <span *ngIf="!city.valid && city.touched" class="error-text"
    >Please enter your City or Town</span
  >
</div>

当我不使用[(ngModel)]="city" 时，我没有得到双向绑定。当我将本地引用 #city="ngModel" 重命名为 #cityWhatever="ngModel" 时，city 的值在提交表单时为 undefined：

<form
 (ngSubmit)="onSubmit(personalDetails)"
 #personalDetails="ngForm"
>

我正在运行 Angular 版本：“@angular/common”：“~9.1.11”

提前谢谢你！

【问题讨论】：

请使用以下之一。 #city="ngModel" 或 [(ngModel)]="city"
那么我无法访问本地参考#city
删除#cityWhatever="ngModel"
这不是正确的方法。提交表单时，我需要一个本地参考来验证和访问输入的值。
移除 ngModel

标签： html angular

【解决方案1】：

试试这个并删除 ngModel

<input
 type="text"
 id="city"
 name="city"
 required
 #city="ngModel"
 [(ngModel)]="model.city"
/>
<span *ngIf="!city.valid && city.touched" class="error-text">
  Please enter your City or Town
</span>

【讨论】：

然后我是否只需将模型添加到具有各种属性的组件中？