Question

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

@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当一个值被写入输入时，它会在输入上产生一个'input'事件。然后抓住here。然后导致在控件上调用更改函数，导致它变脏：（

那么你有什么选择：

请勿使用脏而是使用触摸。这仅限于模糊，因此主要是由用户操作引起的。
使用angular_component的材质输入来监听keypress或onblur事件，而不是输入事件。
编写自己的ControlValueAccessor，它是上面链接的DefaultValueAccessor和material-input之间的混合体。混合我的意思是它使用keypress或blur而不是'input'作为onChange事件。

希望有所帮助！

Dart Angular形式原始/脏动态

1 个答案: