简体   繁体   English

如何自定义两种方式的数据绑定使表单变脏

[英]how can I have custom two way databinding make a form dirty

I created a component with two way databinding 我创建了具有两种数据绑定方式的组件

class MyCustom2Way{
      @Input() text: string;
      @Output() textChange = new EventEmitter<string>();
      // MyCustom2Way has something in the template that will 
      // trigger testChange.emit when user interacts with it
}

Now suppose I use MyCustom2Way in a form like this : 现在,假设我以这样的形式使用MyCustom2Way

<form action="" #myForm="ngForm">
  <my-custom-2-way [(text)]="model.field" name="field"></my-custom-2-way>
</form>

How can I have MyCustom2Way turn myForm dirty when user iteracts with MyCustom2Way ? 当用户使用MyCustom2Way迭代时,如何让MyCustom2Way弄脏myForm

You should use ngModel and custom ControlValueAccessor , otherwise form does not know anything about your component, so it will not be marked as dirty. 您应该使用ngModel和自定义ControlValueAccessor ,否则form对您的组件一无所知,因此不会被标记为脏。 [(text)]="model.field" - is just syntactic sugar. [(text)]="model.field" -只是语法糖。

You can pass the form to my-custom-2-way component like this 您可以像这样将表单传递给my-custom-2-way组件

<my-custom-2-way [(text)]="model.field" name="field" [form]="myForm"></my-custom-2-way>

then in my custom component 然后在我的自定义组件中

class MyCustom2Way{
      @Input() text: string;
      @Output() textChange = new EventEmitter<string>();
      // MyCustom2Way has something in the template that will 
      // trigger testChange.emit when user interacts with it
      @Input Form:any 
      this.form._pristine=true;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我该如何做 <dd> 一个项目 <dl> 最初是通过淘汰赛的自定义数据绑定隐藏的? - How can I make the <dd> items of a <dl> to be initially hidden via knockout's custom databinding? 如何排除控件以使表单变脏? - How can I exclude controls from making form Dirty? 我的代码有点脏,我想不出改进它的方法,我能做些什么来获得更紧凑和更好的解决方案? - i have a code that its kinda dirty and i cant think of a way to improve it, what can i do to have a more compact and better solution? 角度的双向数据绑定不能像我预期的那样工作 - two way databinding in angular not working as I expected 我怎样才能让这个按钮有两个点击事件? - How can I make this button have two click events? 如何在Angular Js中自定义双向数据绑定 - How to customize two way databinding in Angular Js 双向数据绑定不适用于Internet Explorer 9中的自定义指令 - Two-way databinding does not work with custom directives in Internet Explorer 9 Angular2 Karma测试 - 如何使表单字段“脏”? - Angular2 Karma Test - How to make a form field “dirty”? 如何在自定义指令中将字段设置为$ dirty? - How can I set my field to $dirty inside my custom directive? 如何避免子窗体在AngularJS中使外部窗体$ dirty出现? - How to avoid a subform to make outer form $dirty in AngularJS?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM