Clash Royale CLAN TAG#URR8PPP

how can i convert two forms to components and adding components to view in angular 5

I have two forms that are currently running fine on same component.
as show in InfoAndQualificationComponent.ts

import Component, OnInit from '@angular/core';
import FormGroup, FormControl from "@angular/forms";
@Component(
selector: 'app-info-and-qualification',
template: `<form class="form-horizontal" [formGroup]="form" (ngSubmit)="form.value">
<div class="form-group">
<input type="text" class="form-control" placeholder="firstname" formControlName="firstname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="lastname" formControlName="lastname">
</div>

<div class="form-group"style="margin-top:50px">
<input type="text" class="form-control" placeholder="Qualification" formControlName="qualification">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Qualification type" formControlName="type">
</div>
<div class="form-group"><button class="btn-primary">Submit</button></div>
</
)
export class InfoAndQualificationComponent implements OnInit

constructor()

ngOnInit()


form = new FormGroup(
firstname: new FormControl(),
lastname: new FormControl(),
qualification: new FormControl(),
qtype: new FormControl(),
);

onSubmit(e)

console.log(e);




But because of the clutters of code and the need for modularization (making the code smaller for easy update and debugging). i would like split these forms to two different sub components like so for UserInfoComponent.ts

import Component, OnInit from '@angular/core';
import FormGroup, FormControl from "@angular/forms";

@Component(
selector: 'app-userinfo',
template: `<form class="form-horizontal" [formGroup]="form1" (ngSubmit)="form1.value">
<div class="form-group">
<input type="text" class="form-control" placeholder="firstname" formControlName="firstname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="lastname" formControlName="lastname">
</div>

<div class="form-group"><button class="btn-primary">Submit</button></div>
</form>`,

)
export class UserInfoComponent implements OnInit

constructor()

ngOnInit()


form1 = new FormGroup(
firstname: new FormControl(),
lastname: new FormControl(),
);

onSubmit(e)

console.log(e);




and UserQualificationComponent.ts

import Component, OnInit from '@angular/core';
import FormGroup, FormControl from "@angular/forms";

@Component(
selector: 'app-qualification',
template: `<form action="" class="form-horizontal" [formGroup]="form2" (ngSubmit)="form2.value">
<div class="form-group">
<input type="text" class="form-control" placeholder="Qualification" formControlName="qualification">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Qualification type" formControlName="qtype">
</div>
<div class="form-group"><button class="btn-primary">Submit</button></div>
</form>`,
)
export class UserQualificationComponent implements OnInit

constructor()

ngOnInit()


form2 = new FormGroup(
qualification: new FormControl(),
qtype: new FormControl(),
);

onSubmit(e)

console.log(e);




to be imported into one component maybe the infoqualification.ts like so

<app-userinfo></app-userinfo>
<div style="margin-top:50px">
<app-qualification></app-qualification>
</div>


with their individual implementation in their seperate components and they should return value to the main component.
Please Note i am quite new at angular.

2 Answers
2

Use ControlContainer

Documentation:https://angular.io/api/forms/ControlContainer

import Component from '@angular/core';
import ControlContainer, NgForm from '@angular/forms';

@Component(
selector: 'address',
template: `
<fieldset ngModelGroup="address">
<div>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
</div>
<div>
<label>Street:</label>
<input type="text" name="street" ngModel>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
</fieldset>
`,
viewProviders: [ provide: ControlContainer, useExisting: NgForm ]
)
export class AddressComponent


For More Details Check this:https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475

You are creating separate FormGroup for each Component. Would suggest create single Form Group in the parent component and pass as @Input() to child component. Using Form Group in child components we can add form controls.

Also you can create validation methods in each child components, which will be called from the parent component.

Code for Submit button and validation should be added in parent component.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.