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

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

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

先感谢您！