时间戳

首页 > 解决方案 > 表单子组件的 Angular ngmodel 验证

angular - 表单子组件的 Angular ngmodel 验证

问题描述

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

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'为null时的子组件验证无效。我想如果子组件无效，那么父组件应该是无效的。因为我想禁用父母的按钮。

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

标签： angulartypescript

解决方案

尝试在里面使用表单标签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>

希望这可以帮助

推荐阅读