角度 4 模板驱动表单 - 从一个字段第二个标记为已触摸答案

【问题标题】：angular 4 template driven form - mark from one field secondone as touched角度 4 模板驱动表单 - 从一个字段第二个标记为已触摸
【发布时间】：2017-10-18 19:37:29
【问题描述】：

我有两个字段 f.e.

<form #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
<div>
    <label>Name</label>
    <input type="text" name="name" [(ngModel)]="user.name" #name="ngModel" required minlength="5">
    <label>Street</label>
    <input type="text" name="street" [(ngModel)]="user.surname" #surname="ngModel" required>
</div>
<button type="submit">Submit</button></form>

我想将 secondone 中的其中一个字段标记为已触摸，这可能吗？我尝试在名称上使用 (ngModelChange)="surname.control.markAsTouched(true)" 将姓氏标记为已触摸，但它不起作用

【问题讨论】：

标签： angular angular4-forms ngmodel angular-ngmodelchange

【解决方案1】：

(ngModelChange)会在你改变第一个输入值时起作用，你可以使用(blur)标记第二个被触摸的值。

<input type="text" name="name" [(ngModel)]="user.name" #name="ngModel" 
  (ngModelChange)="surname.control.markAsTouched()" required minlength="5">
<input type="text" name="street" [(ngModel)]="user.surname" #surname="ngModel" required>
{{surname.touched | json}}
<button type="submit">Submit</button>

Demo Plunker

【讨论】：