Question

我一直在尝试创建自定义输入组件，它将隔离自己的验证逻辑，消息，标签等。问题是，如果我在内部输入上有“必需”或“电子邮件”等验证，封装此自定义组件的表单在计算其有效性时会忽略它。

例如：

<form novalidate #myForm="ngForm">
    <p>Form is valid: {{myForm.valid}}</p>
    <div>
        <my-input name="custom" [(ngModel)]="somedata"></my-input>
    </div>
</form>

自定义组件代码：

@Component({
  selector: 'my-input',
  template: `
        <label>Inner custom component input (doesn't make form valid)</label>
        <input required type="text" [(ngModel)]="value" (blur)="onBlur()" ngDefaultControl/>
  `,
  providers: [MakeProvider(MyInputComponent)],
})
export class MyInputComponent implements ControlValueAccessor {
   /** Bloat. Check plnkr below for more **/
}

有关更完整的示例，我创建了这个plunker： https://plnkr.co/edit/p0KfBIwYwibL0QkBf1xo?p=preview

当普通输入（check plnkr）为空时，表单被视为无效。到现在为止还挺好。您可以填写表格，表格被认为是有效的。但是自定义组件内部的内部输入也是必需的，并且表单忽略了这一事实。我不确定我做错了什么。也许你能为我解释一下这个问题吗？

提前谢谢！

Angular - 内部自定义组件“无效”状态未传播

0 个答案: