CODEWITHSUNDEEP
formsangular
Galdor
Galdor

Reputation: 1975

angular2: how to use input fields in sub components of forms

Look at my plunkr: http://plnkr.co/edit/hB34VjxP98uz1iAYS7Dw?p=preview

Name is included in myform.form, but Name1 of component inner is not. How do I include Name1 in myform?

<div class="container">
    <div  [hidden]="submitted">
    <h1>Hero Form</h1>
<form #heroForm="ngForm">
<div class="form-group">
    <label for="name">Name</label>
<input type="text" class="form-control" required
    [(ngModel)]="modelname"
name="name"  #name="ngModel" >
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
    Name is required
</div>
<inner></inner>
</div>

</form>
{{heroForm.form.value | json}}
</div>

Template of inner.component:

<label for="name">Name1</label>
<input type="text" class="form-control" required
  [(ngModel)]="modelname1"
  name="name1"  #name1="ngModel" >
<div [hidden]="name1.valid || name1.pristine" class="alert alert-danger">
Name1 is required
</div>

See this issue: https://github.com/angular/angular/issues/9600

Upvotes: 1

Views: 968

Answers (1)

Rohan Jalil
Rohan Jalil

Reputation: 41

I have fixed your code to accomplish your end goal. Now both Name and Name1 are included in the form and values are coming up on the display for you

I have created a fork from your plnkr and fixed your code to support your use case. Please take a look : http://plnkr.co/edit/UHkwJ9?p=preview

inner.component.html is changed as :

<label for="name">Name1</label>
<input type="text" class="form-control" required
  [(ngModel)]="modelname1" [formModel]="form" [registerModel]="name2"
  name="name2"  #name2="ngModel" >
<div [hidden]="name2.valid || name2.pristine" class="alert alert-danger">
Name1 is required
</div>

hero-form.component.ts is changed as :

<inner [form]="heroForm"></inner>

New Directive is added which will register a new control in the existing form reference : 

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { NgModel, NgForm } from '@angular/forms';

@Directive({
  selector: '[formModel]'
})
export class FormModelDirective implements OnInit  {

  private el: HTMLInputElement;

  @Input('formModel') public form: NgForm;
  @Input('registerModel') public model: NgModel;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  ngOnInit() {
    if (this.form && this.model) {
      this.form.form.addControl(this.model.name, this.model.control);
    }
  }

}

Output Image :

Output of the plnkr code

Reference : plnkr.co/edit/GG2TVHHHGbAzoOP5mIRr?p=preview

Upvotes: 1

Related Questions