Accessing angular ngform status in parent component - forms

Question

This is the Parent HTML
<parent-component>
<child></child>
<button type="submit" [disabled]="!childForm.valid">
</parent-component>
This is Child HTML
<child>
<form #childform=ngform>
<input required type="text">
</form>
</child>
I need to access the childform status in the parent component

Answer 1

Child template:
<form #childform=ngForm>
<input required type="text">
</form>
Child component:
export class ChildComponent implements OnInit {
#Output() validityChange = new EventEmitter<boolean>();
#ViewChild('childform') form: NgForm;
private validStatus: boolean;
ngOnInit() {
if (!this.form) return;
this.form.valueChanges
.subscribe(_ => {
if(this.validStatus !== this.form.valid) {
this.validStatus = this.form.valid;
this.validityChange.emit(this.form.valid);
});
}
}
Parent template:
<child (validityChange)="childFormValid = $event"></child>
<button type="submit" [disabled]="!childFormValid">
Parent component:
export class ChildComponent implements OnInit {
private childFormValid: boolean;
...
}

Answer 2

Probably you could do it using #ViewChild:
Child component template file:
<form #form="ngForm">
<input type="text" ngModel required name="input">
</form>
and use #ViewChild in child component TS file like this:
#ViewChild('form') form: NgForm;
Parent component template file:
<button type="submit" *ngIf="childForm" [disabled]="!childForm.valid">Submit</button>
and in your parent component TS file reference to child component as well:
export class ParentComponent implements AfterViewInit {
#ViewChild('child') child: ChildComponent;
public childForm;
ngAfterViewInit(): void {
this.childForm = this.child.form.form;
}
}

Answer 3

Use an output
<child (myOutput)="myFunction($event)"></child>
In your parent component :
myFunction(event: Event) {
console.log(event); // hello world
}
In your child component
import { Output, EventEmitter } from '#angular/core';
// ...
#Output() myOutput: new EventEmitter();
doSomething() {
thisMyOutput.emit('hello world');
}

Answer 4

Child Component
export class ChildparentComponent implements OnInit {
#Output() toParent = new EventEmitter<string>();
constructor() { }
onChange(value:string){
this.toParent.emit(value);
}
In Child Html
<app-childparent (toParent)="childValue = $event"></app-childparent>
In Parent
Access this child value in parent template like {{childValue}}
A working example of the Same
https://rahulrsingh09.github.io/AngularConcepts/#/inout
Its Backend Code
https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/parentchild/parentchild.component.html