Disabling a Submit Button with Angular 2+ Template-Driven-Form and a child component?

Question

Using template-driven forms in Angular 2+, I wanted to make use of child components within a form for easier unit testing of form elements. With that said, I'd like to be able to disable the submit button with template reference variables (ie) button [disabled]="!myForm.form.valid". I know something should be passed from the parent-form to the child-component, but I haven't been able to figure what that is, or the syntax that should be used.

Using a Stackblitz example, How would I get the submit button disabled if the input validators (specifically minlength in this example) are within a child component to a form?

Stackblitz Example https://stackblitz.com/edit/angular-zzeton

I've looked at the following links but they have more todo with true input-control-customization vs accessing template-reference-variables:

How to add validation in template driven form from component in angular 6 https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#demos

score 1 · Accepted Answer · edited Mar 21 '19 at 08:48

1

Declare 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) { }
}

Forked Example:https://stackblitz.com/edit/angular-vmqm8h Ref:https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475

edited Mar 21 '19 at 08:48

taras-d

1,789
1
12
29

answered Oct 03 '18 at 15:37

Chellappan வ

23,645
3
29
60

wow - dead simple thank you - I read that article but never made the connection – Stu Oct 03 '18 at 15:45

Disabling a Submit Button with Angular 2+ Template-Driven-Form and a child component?

1 Answers1