表单子组件的 Angular ngmodel 验证

Question

I have a component and it has model like this;

model={
name,
surname,
age,
birthDate
}

I pass the model to 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>

Have a sub component like this

<input name="age" [(ngModel)]="model.age" required>
<input name="birthDate" [(ngModel)]="model.birthDate> // not required

At parent component when i look at the validation 'sub.valid' this is always valid. But at sub component when 'model.age' is null validation is invalid.I wanted to if sub component if invalid, so parent component should be invalid. Cause i want to disable parent's button.

I imported Control Value Accessor and provided the NG_VALUE_ACCESSOR dont fix it. Codes are for example. My model very big than this. I tried Validator interface and validate function, but it is a long way to do it.

Answer 1

Try to use form tag inside sub-component :

<form #form="ngForm">
  <input name="age" [(ngModel)]="model.age" required>
  <input name="birthDate" [(ngModel)]="model.birthDate> // not required
</form>

@ViewChild('form') public form: NgForm;

In parent component template access subcomponent form to check if subcomponent's form invalid:

<sub-component #sub [model]="model"></sub-component>
<button [disabled]="sub.form?.invalid" (click)="addOrUpdate()" ></button>

Hope this helps

Answer 2

Can i do something like this?

<form #form="ngForm">
<sub-component #sub [model]="model"></sub-component>
<button [disabled]="form.invalid" (click)="addOrUpdate()" ></button>
</form>