add markAsTouched to ControlValueAccessor interface

Which @angular/* package(s) are relevant/releated to the feature request?

forms

Description

When using the ControlValueAccessor in a component you can update the value on the parent form with the onChange callback and you write a value from the parent in the component using the writeValue implementation. Similarly you can update the touched status on the parent with the onTouched callback, but there is no way for the parent to signal to the component that it should update it’s internal touched status…

Consider using ControlValueAccessor in a component to wrap a date field using dropdowns for each individual date part. So a dropdown for day, month and year. Currently it is nog possible to mark these dropdowns as touched, when the markAllAsTouched method on the parent form is called. In order to do this you have to update the component yourself some other way

Proposed solution

add an optional markAsTouched() or writeTouched(value: boolean) method to the ControlValueAccessor interface, that gets called whenever the parent form tries to update the touched status of the formControl.

Alternatives considered

I’ve included the parent FormControl in the component with FormGroupDirective. Like this…

constructor(private rootFormGroup: FormGroupDirective) {
}

ngOnInit() {
  ...
  this.rootControl = this.rootFormGroup.get(this.formControlName);
}

and then just use the touched property of the rootControl in addition to the touched property of the individual child controls

Another alternative is to just declare another Input() touched = false in the component, and update that value manually whenever you call the markAllAsTouched on the parent form.

[kekel87]

Hi, we are also very interested in this feature.

Because we want to display invalid fields when users press the submit button on large CVA forms.

For the moment we are using this not very clean directive, but it does the job.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.