Dart Angular 形式 pristine/dirty 动态

Question

我有一个用户列表和用户详细信息组件，类似于 hero list/detail 教程中的设置，在列表中选择用户应该可以在详细信息组件中进行编辑。问题是更改用户会使表单变脏。为了使这里更清楚是精简代码：

@Component(...)
class UserDetail {
  @Input()
  User user;
  Future onSubmit() async {...}
}

模板如下：

<form (ngSubmit)="onSubmit()" #userEditForm="ngForm">
    <h2>{{user.name}}</h2>
    <input type="checkbox"
        id="is_happy"
        [(ngModel)]="user.is_happy"
        ngControl="is_happy"
        #is_happy="ngForm" />
    <div [hidden]="userEditForm.pristine">
        <material-button
            [disabled]="!userEditForm.valid"
            (trigger)="onSubmit()">
            Update
        </material-button>
    </div>
</form>

我想做到这一点，只有当用户与控件交互时，表单才会变脏，而不是当底层用户从外部更改时。

正确的方法是什么？有没有办法在用户更改时重置表单？我还没有找到任何我可以轻松使用来实现这个简单用例的东西。

Answer 1

问得好。

这是默认值访问器的一个不幸的副作用。它正在创建一个反馈循环，导致控件在写入时变脏。关于此line when a value is being written to the input it causes an 'input' event on the input. This is then caught here的通知。然后导致在控件上调用更改函数，导致它变脏:(

那么你有什么选择：

不要使用 dirty 而是使用 touched。这仅在模糊时设置，因此它主要是由用户操作引起的。
使用 angular_component 的 material-input 监听 keypress or onblur 事件而不是输入事件。
编写您自己的 ControlValueAccessor，它是 DefaultValueAccessor 和上面链接的 material-input 之间的混合体。通过混合我的意思是它使用按键或模糊而不是 'input' 作为 onChange 事件。

希望对您有所帮助！

Dart Angular 形式 pristine/dirty 动态

Dart Angular form pristine/dirty dynamics

dart

angular-dart

angular