Question

我有一个关于重置带有自定义输入的表单的问题。

我将验证消息绑定到输入的触摸属性。在默认输入时，form.reset（）也会将触摸状态重置为false，在自定义输入上，不会转发。

我添加了一个plunkr https://plnkr.co/edit/ZyELDDFf3rxQRipHlWnb?p=preview来说明问题：触摸并离开两个控件，两者都被触摸：true，然后重置。如何将清除重置事件（将恢复触摸状态恢复为假）转发到我的自定义输入？

@Component({
selector: 'my-app',
template: `
    <p><span class="boldspan">Form data:</span>{{demoForm.value | json}}</p>
    <p><span class="boldspan">Model data:</span> {{dataModel}}</p>
    <form #demoForm="ngForm">
      <custom-input name="someValue" [(ngModel)]="dataModel">
        custom input
      </custom-input>
      <label>native input<br>
      <input type="text" [(ngModel)]="someOtherValue" name="someOtherValue"
      #sOV="ngModel"></label>
      <div>touched: {{sOV.touched}}</div>
    </form>
    <br>
    <button (click)="demoForm.reset()">Reset Form</button>`
})
export class App {
    dataModel: string = '';
}

谢谢和最好的问候

Answer 1

使用

demoForm.resetForm()

而不是

demoForm.reset()

Angular - 自定义输入：通过form.reset（）重置触摸状态不起作用

1 个答案: