Nested Component in Angular 6

Question

I have a component A(child) which I want to display under component B(parent). Component "A"

<div [formGroup]="dbForm">
    <div class="form-group">
      <label class="form-label" for="dbServerID">Exposure Server</label>
      <div>
        <select formControlName="dbServer" class="form-control custom-select" id="dbServerId">
          <option *ngFor="let ds of databaseServers" [ngValue]="ds">
            {{ds.databaseServerName}}
          </option>
        </select>   
      </div>
    </div>
  </div>

Typescript page of control "A"

@Component({
  selector: 'app-database-server',
  templateUrl: './database-server.component.html',
  styleUrls: ['./database-server.component.css']
})
export class DatabaseServerComponent implements OnInit {
  dbForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.dbForm = this.fb.group({
      dbServer: ['', Validators.required ]
    });
  }

Html page of Component "B"

<form [formGroup]="newPfForm">
  <div class="form-group">
    <label class="form-label">Name</label>
    <input class="form-control" type="text" formControlName="name" />
  </div>
  <div>
    <app-database-server ></app-database-server>
  </div>
</form>
<p>Form value: {{ newPfForm.value | json }}</p>

Typescript of Component "B"

@Component({
  selector: 'app-new-portfolio',
  templateUrl: './new-portfolio.component.html',
  styleUrls: ['./new-portfolio.component.css']
})
export class NewPortfolioComponent implements OnInit {
  newPfForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.newPfForm = this.fb.group({
        name: ['', [Validators.required, Validators.maxLength(10)]],
        dbForm: this.fb.group({
          dbServer: ['', Validators.required],
        })
    });
}

Now when I enter anything in the textbox of parent component it's visible in From value but if I select drop-down of child component, form value is not updating. Even I have spent 2 hrs but I am not able to find my mistake. screen shot of screen

if you share your code in stackbitz.com it will be easy to help — Chellappan வ
– Chellappan வ, Commented Jul 5, 2018 at 16:46

Amit Chigadani · Accepted Answer · 2018-07-06 10:29:20Z

4

You should be using the same formGroup in parent as well as child component. You can pass the parent formGroup as an input to child component.

Before that create @Input() property in child component

component A

export class DatabaseServerComponent implements OnInit {
  @Input() dbForm : FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
   // Simply add child control to the form. No need to create form again
   this.dbForm.addControl('dbServer', new FormControl('', Validators.required));
  }

Now pass parent form newPfForm to child as an input, so that they share the same form group

template B (parent)

<div>
    <app-database-server [dbForm]="newPfForm"></app-database-server>
</div>

Template of component A would remain as it is. No Change.

edited Jul 6, 2018 at 10:29

answered Jul 5, 2018 at 17:17

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Avij Over a year ago

You would also need to add new form controls in Component A under a div which has formGroup directive. In continuation to above, html of Component A would look like <div [formGroup]="dbForm"> ....YOUR FORM CONTROL HTML </div> Else you will get Error: formControlName must be used with a parent formGroup directive

Amit Chigadani Over a year ago

@Avij OP's child component (Component A) already has the same structure what you are mentioning here.

Avij Over a year ago

Ooops...Dint notice that. Looked your answer only.

Amit Chigadani Over a year ago

You may try this this.dbForm.addControl('dbServer', new FormControl('', Validators.required)); Updated the answer with that.

Derek Brown · Accepted Answer · 2018-07-05 16:51:34Z

1

In order to sync the values of nested form components, you need to set the formGroupName parameter:

https://angular.io/api/forms/FormGroupName

answered Jul 5, 2018 at 16:51

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

1 Comment

Rajesh Over a year ago

Can you point me to a live example as I have followed the link but I am not able to make it work in my case?

Collectives™ on Stack Overflow

Nested Component in Angular 6

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related