angular - Dart Angular 形原始/脏动态

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

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

我想这样做，以便仅当用户与控件交互时才使表单变脏，而不是在基础用户从外部更改时才变脏。

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

最佳答案

很好的问题。

这是默认值访问器的不幸副作用。它正在创建一个反馈循环，使控件在写入时变脏。请注意，在此line上，将值写入输入时，它将在输入上引起“输入”事件。然后将其捕获为here。然后，这导致更改函数在控件上被调用，从而使其变脏:(

那么您有什么选择:

不要使用肮脏的东西，而应该使用touched。这仅在模糊时设置，因此主要是由用户操作引起的。

使用angular_component的material-input侦听keypress或onblur事件的更改，而不是输入事件。

编写自己的ControlValueAccessor，它是DefaultValueAccessor和上面链接的物料输入之间的混合体。通过混合，我的意思是它使用按键或模糊而不是'input'作为onChange事件。

希望有帮助!

关于angular - Dart Angular 形原始/脏动态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46225710/