One of the components I'm working on has a model structured like this:
model={
name,
surname,
age,
birthDate
}
I am passing this model to a sub-component.
<form #form="ngForm" >
<input name="name" [(ngModel)]="model.name" required>
<input name="surname" [(ngModel)]="model.surname" required>
<sub-component #sub="ngModel" [(ngModel)]="model"></sub-component>
<button [disabled]="form.invalid" (click)="addOrUpdate()" ></button>
</form>
The sub-component looks like this:
<input name="age" [(ngModel)]="model.age" required>
<input name="birthDate" [(ngModel)]="model.birthDate> // not required
When checking the validation in the parent component using 'sub.valid', it always appears valid. However, in the sub-component, if 'model.age' is null, the validation is invalid. I want the sub-component's validity to affect the parent component's validity so that the parent's button can be disabled when necessary.
I have tried importing Control Value Accessor and providing NG_VALUE_ACCESSOR but it didn't solve the issue. The code snippets provided are just for illustration purposes - my actual model is much larger. I also attempted implementing the Validator interface and validate function, but found it to be a cumbersome solution.