3

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

Khirthan
  • 197
  • 1
  • 4
  • 13

4 Answers4

9

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;

  ...
}
Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
4

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;
  }
}
Nima Hakimi
  • 1,382
  • 1
  • 8
  • 23
  • Ya this is working but i have scenario where iam calling the childcomponent 2 times and the second form submit button is always disabled. it gets enabled only, when the 1st form valid is true, its kind of tricky!!! – Khirthan Jun 29 '17 at 08:59
0

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');
}
0

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
Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
  • This wouldnt work as i need to send the ngform object itself in disabled of parent component!!! – Khirthan Jun 29 '17 at 07:42
  • Then i would suggest you to go for services to share info https://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2 – Rahul Singh Jun 29 '17 at 08:01