禁用具有角2+模板驱动表单和子组件的提交按钮？

Question

在Angular 2+中使用模板驱动的表单，我希望使用表单中的子组件来更容易地对表单元素进行单元测试。也就是说，我希望能够禁用submit按钮With template reference variables(ie)按钮[disabled]=“！myform.form.valid”。我知道有些东西应该从父窗体传递到子组件，但我还不知道这是什么，也不知道应该使用什么语法。

我已经看过以下链接，但它们在真正的输入控制定制与访问模板引用变量方面有更多的工作要做：

如何从angular 6 https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-Angular-2.html#中的组件添加模板驱动窗体中的验证

Answer 1

声明ControlContainer

@Component({
  selector: 'my-hero-name',
  templateUrl: './app.hero-name.html',
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class HeroNameComponent {
  @Input() hero: Hero;
}

export class Hero {
  constructor(public name: string) { }
}

分叉示例:https://stackblitz.com/edit/angull-vmqm8h参考:https://medium.com/@a.yurich.zuev/angull-nested-template-drived-form-4a3de2042475