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'为null的子组件上，验证无效。我想要子组件是否无效，因此父组件应该无效。因为我要禁用父母的按钮。

我导入了“控制值访问器”，但提供了NG_VALUE_ACCESSOR不修复它。例如，代码。我的模特比这大很多。我尝试了Validator接口和validate函数，但这是很长的路要走。

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>

角度ngmodel验证

2 个答案: