Currently, I have two forms running smoothly on the same component as shown 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);
}
}
However, due to the clutter of code and the necessity for modularization (to make the code smaller for easier updates and debugging), I intend to split these forms into two different sub-components. First, 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 for 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 simplify, both can be imported into one component like infoqualification.ts as follows:
<app-userinfo></app-userinfo>
<div style="margin-top:50px">
<app-qualification></app-qualification>
</div>
Each component will have its own implementation in their respective components and will return values back to the main component. Please bear in mind that I am relatively new to Angular.