角度ngmodel验证

Question

我有一个组件，它有这样的模型;

model={
name,
surname,
age,
birthDate
}

我将模型传递给子组件

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

有这样的子组件

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

在父组件中，当我查看验证'sub.valid'时，这始终有效。但是在子模型中，当'model.age'为空时，验证无效。我想如果子组件无效，那么父组件应该是无效的。因为我想禁用父母的按钮。

我导入了控制值访问器并提供了NG_VALUE_ACCESSOR而不修复它。代码是例如。我的模特比这个大很多。我尝试过Validator接口和验证功能，但要做到这一点还有很长的路要走。

Answer 1

尝试在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;

在父组件模板中访问子组件form以检查子组件的表单是否无效：

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

希望这可以帮助

Answer 2

我可以这样做吗？

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