首页 文章

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

提问于
浏览
7

我实现了一个自定义组件,它是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 回答

  • 0

    当您希望触摸控件状态时,需要从组件内部调用onTouched()(this._onTouchedCallback) . 对于this._onChangeCallback也是如此 . 例如,在my-custom-input中将(ngModelChange)=“onTouched(value)”添加到输入标签

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

相关问题