Javascript Angular：从NgForm在自定义输入组件中调用markAsDirty（）

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

//父组件
onSubmit（表格：NgForm）{
this.form.controls.registerEmail.markAsDirty（）；
}
//这就是我的表单中组件的外观：
//结果
电子邮件

如您所见，表单文本具有“ng dirty”类，其中的输入保持原始状态

为了实现我的自定义组件，我使用了您在web上找到的众多说明之一。这是我用过的一个：

我想在按下submit按钮时将每个输入字段标记为脏字段。因为当你模糊输入时，我的验证就会出现

我发现了我的组件从ControlValueAccessor继承的问题。我的组件和我的NgForm之间的唯一连接是通过它的NgModel。NgForm可以使用my组件作为FormControl，因为它有自己的NgModel。在事件中，可以在两个方向传递值。但是像markAsDirty（）或markAsTouched（）这样的方法是不可能的。组件内部没有问题。但我的NgForm无法真正访问组件。仅适用于NgModel

有没有办法实现这一点？我认为这并不难理解，但我为此奋斗了很长一段时间。目前我唯一的解决方案是使用jQuery对每个输入进行迭代以激发焦点。必须有一个更干净的解决方案

Thx

当您希望控件状态设置为触动时，需要从组件内部调用onTouched（）（this.\u onTouchedCallback）。这个也一样

例如，将（ngModelChange）=“onTouched（value）”添加到自定义输入中的输入标记

抄袭自：

---

您可以将表单的

dirty

属性作为输入传递给实现

ControlValueAccessor

的组件，然后使用

ReactiveFormsModule

和

FormControl

更新内部输入的状态

保存表单的组件：

提交

然后在实现

控制值访问器的组件中：

ngOnChanges（{formDirty}:SimpleChanges）{
if（formDirty.currentValue）{
this.inputCtrl.markAsDirty（）；
}否则{
this.inputCtrl.markAsPristine（）；
}
}

.
问题在于，当脏状态发生变化时，没有简单的方法可以获得任何通知。看

助手指令：

@Directive({
  selector: 'my-input'
})
export class MagickDirective implements DoCheck {
  constructor(private control:NgModel){
  }
  ngDoCheck(): void {
    //you can do whatever you want
    if(this.control.dirty) {
      (this.control.valueAccessor as MyInputComponent).setDirty(true);
    }
  }
}

我也有同样的问题。关于这个问题有什么消息吗？如果什么都不起作用，请添加
formControl
作为输入组件的输入，并调用这些方法<代码>

。我们遇到了一个类似的问题，这是最实际的方法，因为子输入组件除了其输入之外，不知道来自其父组件的任何信息。@mchl18您能再解释一下或提供一个示例代码吗？这个问题快把我逼疯了，伙计，终于很容易了。我使用[formSubmitted]=“myForm.submitted”在表单提交后显示错误消息。