Angular: Call markAsDirty() in Custom Input Component from NgForm

Question

I implemented a custom component which is a wrapper for an input with NgModel. I connected them with a ControlValueAccessor. It works well, I can easily access values from my parent component.

But if I try to call markAsDirty() the touched flag is only changing on my component, it has no effect to my input inside the component. I will give you an example:

// 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>

As you can see the form-text has the "ng-dirty" class, the input inside remains pristine.

To implement my custom component I used one the many instructions you find on the web. Here is the one I used: angular2 custom form control with validation json input

I want to mark every input field as dirty when the submit button is pressed. Because my validation shows up, when you blur the input.

I figured out that there is the problem my component inherits from ControlValueAccessor. The only connection between my component and my NgForm is over its NgModel. The NgForm can use my component as FormControl because it has its own NgModel. Over events it's possible to pass values in two directions. But it's not possible with methods like markAsDirty() or markAsTouched(). Inside the component it's no problem. But my NgForm has no real access to components. Only to NgModel.

Is there any way to implement that? I thought it's not that hard to figure it out, but I am struggling for a long time with that. My only solution for the moment is to iterate over every input with jQuery to fire a focus. There must be a cleaner solution for that.

Thx

Solution 1

You can pass as input in the component which implements ControlValueAccessor the dirty property of the form and then update the state of your inner input using ReactiveFormsModule and FormControl.

The component which holds your form:

<form #myForm="ngForm" (submit)="onSubmit($event)">
    <my-input name="my-input" [(ngModel)]="myInput" [formDirty]="myForm.dirty"></my-input>
    <button type="submit">Submit</button>
</form>

Then in the component which implements ControlValueAccessor:

  ngOnChanges({ formDirty }: SimpleChanges) {
    if (formDirty.currentValue) {
      this.inputCtrl.markAsDirty();
    } else {
      this.inputCtrl.markAsPristine();
    }
  }

Here you can find the relevant snippet.

Solution 2

You need to call onTouched() (this._onTouchedCallback) from inside your component when you want the controls status set to touched. Same for this._onChangeCallback

For example by adding (ngModelChange)="onTouched(value)" to the input tag in my-custom-input

Copied from: https://github.com/angular/angular/issues/10151

Comments

[Pascal Chorus]

I have exactly the same problem. Any news on this issue?

[mchl18]

If nothing works, add the formControl as an input for the input component and call the methods. <form-text [control]="form.controls.eMail">. We ran into a similar issue and this was the most practical way, since the child input component does not know anything from its parent except its inputs.

[Sandwell]

@mchl18 could you explain a bit more or provide a sample code ? This issue is driving me crazy

[Sandwell]

Thanks man, it was quite easy finally. I used [formSubmitted]="myForm.submitted" to display error messages after form submit though.