Angular:从NgForm调用自定义输入组件中的markAsDirty()

Question

我实现了一个自定义组件,它是使用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上找到的许多说明.这是我使用的那个:带有验证json输入的angular2自定义表单控件

我想在按下提交按钮时将每个输入字段标记为脏.因为我的验证显示,当你模糊输入.

我发现我的组件从ControlValueAccessor继承了问题.我的组件和我的NgForm之间的唯一连接是它的NgModel.NgForm可以将我的组件用作FormControl,因为它有自己的NgModel.在事件中,可以在两个方向上传递值.但是使用markAsDirty()或markAsTouched()等方法是不可能的.在组件内部没有问题.但我的NgForm无法真正访问组件.仅限于NgModel.

有没有办法实现呢？我认为解决这个问题并不难,但我很长时间都在苦苦挣扎.我目前唯一的解决方案是使用jQuery迭代每个输入来激发焦点.必须有一个更清洁的解决方案.

谢谢

Answer 1

当您希望将控件状态设置为触摸时，您需要从组件内部调用 onTouched() (this._onTouchedCallback)。与此相同。_onChangeCallback

例如，通过将 (ngModelChange)="onTouched(value)" 添加到 my-custom-input 中的输入标记

复制自： https: //github.com/angular/angular/issues/10151