angular - Dart Angular 形成原始/脏动态

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当一个值被写入输入时，它会在输入上引发一个“输入”事件。然后被捕获 here .然后导致在控件上调用更改函数，导致它变脏:(

那么你有什么选择:

不要使用脏的，而是使用触摸的。这仅设置为模糊，因此它主要是由用户操作引起的。

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

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

希望有帮助!