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

Question

我有两个字段 fe

<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>

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

Answer 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>

演示 Plunker