Dart角度形式原始/脏动态

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

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

我想让这个形式仅仅是脏的，如果用户交互与控制，而不是当底层用户从外部改变时。

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

来源

2017-09-14 Milan

优秀的问题。

这是默认值访问器的一个不幸的副作用。它正在创建一个反馈循环，导致控件在写入时变脏。注意这个line当一个值被写入输入时，它会在输入端引起一个'输入'事件。然后被抓到here。然后使被叫做导致它脏:(

那么，什么选择呢，你有控制权发生变化的功能。

不要用脏，但使用触摸这实际上是只设置上模糊，因此将主要由用户行为引起的。
使用angular_component的材料输入监听到keypress或onblur事件的变化，而不是输入事件。
写自己的ControlValueAccessor这是之间的混合体DefaultValueAccessor和材料输入链接的ab OVE。通过混合我的意思是它使用按键或模糊，而不是'输入'作为onChange事件。

希望有帮助！

来源

2017-09-15 05:38:05

由于材料输入是一个文本字段，我尝试使用材质复选框，但它的行为与常规复选框相同。我认为没有自定义值访问器代码[有]（https://github.com/dart-lang/angular_components/tree/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox）。另外，你知道是否有任何关于编写ValueAccessors的文档？我之前尝试过，但我没有得到任何地方。 – Milan

实际上有自定义值存取器代码，但它具有与默认存取器相同的问题。这里是[设置]（https://github.com/dart-lang/angular_components/blob/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox/material_checkbox.dart#L113），这里是它标记的地方[脏]（https://github.com/dart-lang/angular_components/blob/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox/material_checkbox.dart#L118），因为它使用标准检查输入，它也调用脏位。 –

这里没有任何单独的文档。继上面链接的ValueAccessors之一是目前我们拥有的最好的。我们会把它列入清单，写出一些更好的文档。 –

Dart角度形式原始/脏动态

回答

相关问题