时间戳

首页 > 解决方案 > 如何设置具有双向绑定以及模板驱动表单验证的 Angular2 模板驱动表单元素

html - 如何设置具有双向绑定以及模板驱动表单验证的 Angular2 模板驱动表单元素

问题描述

如何正确设置 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”

先感谢您！

标签： htmlangular

解决方案

试试这个并删除 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>

推荐阅读