Inside the parent component I have a child component. Both have their required fields. At the end I need the enable the submit button only if both components are valid (all their required fields are filled in this case).
How can I accomplish this, especially with template-driven validation?
Seed code
parent component
@Component({
selector: 'parent-comp',
templateUrl: 'parent.html'
})
export class Parent {
}
<input pInputText name="txt1" id="txt1"
required/>
<child-comp></child-comp>
<button pButton type="button" label="Submit"
[disabled]="IF ONE OF THE COMPS IS NOT VALID"></button>
child component
@Component({
selector: 'child-comp',
templateUrl: 'child.html'
})
export class Child {
}
<input pInputText name="txt2" id="txt2"
required/>