我实现了一个自定义组件,它是NgModel输入的包装器 . 我用ControlValueAccessor连接它们 . 它运行良好,我可以轻松访问我父组件的值 .
但是如果我尝试调用markAsDirty(),触摸的标志只会改变我的组件,它对我在组件内的输入没有影响 . 我会举个例子:
// Parent Component
onSubmit(form: NgForm) {
this.form.controls.registerEmail.markAsDirty();
}
// Thats how the component looks like in my form:
<form #form="ngForm" (ngSubmit)="onSubmit(form)" [ngClass]="{'has-error': !form.valid}">
<form-text label="E-Mail" name="registerEmail" email required placeholder="" [(ngModel)]="eMail"></form-text>
</form>
// Result
<form-text label="E-Mail" name="registerEmail" class="ng-untouched ng-invalid ng-dirty">
<label for="form-text-2">E-Mail</label>
<input class="input-control invalid ng-untouched ng-pristine ng-invalid" type="text" id="form-text-2">
</form-text>
正如您所看到的,表单文本具有“ng-dirty”类,内部输入仍然是原始的 .
为了实现我的自定义组件,我使用了您在Web上找到的许多说明 . 这是我使用的那个:angular2 custom form control with validation json input
我想在按下提交按钮时将每个输入字段标记为脏 . 因为我的验证显示,当您模糊输入时 .
我发现我的组件从ControlValueAccessor继承了问题 . 我的组件和我的NgForm之间的唯一连接是它的NgModel . NgForm可以将我的组件用作FormControl,因为它有自己的NgModel . 在事件中,可以在两个方向上传递值 . 但是使用markAsDirty()或markAsTouched()等方法是不可能的 . 在组件内部没有问题 . 但我的NgForm无法真正访问组件 . 仅限于NgModel .
有没有办法实现呢?我认为解决这个问题并不难,但我很长时间都在苦苦挣扎 . 我目前唯一的解决方案是使用jQuery迭代每个输入来激发焦点 . 必须有一个更清洁的解决方案 .
谢谢
1 回答
复制自:https://github.com/angular/angular/issues/10151