Recently started working with Angular... I've created a reactive form (in the parent component) in Angular where the values are dynamically populated by a child component. Upon submitting this form, null values are saved because the form is not detecting the values even though they are visible in the input fields.
Note: The input values are displayed in the parent component (communication from child to parent is successful)
Below is the necessary code snippet:
Child Component TypeScript file
@Output() messageToEmit = new EventEmitter<string>();
@Output() messageToEmit1 = new EventEmitter<string>();
@Output() messageToEmit2 = new EventEmitter<string>();
@Output() messageToEmit3 = new EventEmitter<string>();
save(selectedItem: any, index: number)
{
var num1 = selectedItem.f;
var num2 = selectedItem.l;
var num3 = selectedItem.e;
var num4 = selectedItem.p;
this.messageToEmit.emit(num1);
this.messageToEmit1.emit(num2);
this.messageToEmit2.emit(num3);
this.messageToEmit3.emit(num4);
}
Child Component HTML file
<table class="w3-table-all">
<thead>
<tr class="w3-red">
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Password</th>
<th>Edit / Update</th>
</tr>
</thead>
<tr *ngFor="let thing of things; let i = index;">
<td><input type="text" value="{{thing.f}}" id="{{ 'f' + i }}"> </td>
<td><input type="time" value="{{thing.l}}" id="{{ 'l' + i }}"> </td>
<td><input type="email" value="{{thing.e}}" id="{{ 'u' + i }}"> </td>
<td><input type="password" value="{{thing.p}}" id="{{ 'p' + i }}"> </td>
<td >
<button (click) = "save(thing,i)">Edit</button>
</td>
</tr>
</table>
Parent Component TypeScript file
export class ParentComponent implements OnInit {
edited_values: string;
edited_values1: string;
edited_values2: string;
edited_values3: string;
edited_values4: number;
name = 'Registration';
signupForm:FormGroup;
FirstName:string = "";
LastName:string = "";
Email:string = "";
Password:string = "";
constructor(
private frmbuilder: FormBuilder,
)
{
this.signupForm= frmbuilder.group({
fname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
lname:new FormControl('', [
Validators.required,
Validators.maxLength(50),
Validators.minLength(3),
Validators.pattern('^[a-zA-Z ]*$')
]),
email:['',[Validators.required,Validators.email]],
userpassword:new FormControl('', [
Validators.required,
Validators.maxLength(50)
])
});
}
ngOnInit(){
}
postdata(signupForm:any)
{
this.FirstName=signupForm.controls.fname.value;
this.LastName=signupForm.controls.lname.value;
this.Email=signupForm.controls.email.value;
this.Password=signupForm.controls.userpassword.value;
this.signupForm.reset();
}
getMessage(message: string) {
this.edited_values = message;
}
getMessage1(message1: string) {
this.edited_values1 = message1;
}
getMessage2(message2: string) {
this.edited_values2 = message2;
}
getMessage3(message3: string) {
this.edited_values3 = message3;
}
reset(){
this.signupForm.reset();
}
}
Parent Component HTML file
<form id="contact" [formGroup]='signupForm' (ngSubmit)="postdata(signupForm)">
<h3> Register Now! </h3>
<div class = "form-group">
<input type="text" formControlName='fname' placeholder="Your First name" value={{edited_values}}>
</div>
<div *ngIf="signupForm.controls.fname.invalid && signupForm.controls.fname.touched">
<small> Please enter a valid first name (only letters)! </small>
</div>
<br>
<div class = "form-group">
<input type="text" formControlName='lname' placeholder="Your Last name"
value={{edited_values1}}>
</div>
<div *ngIf="signupForm.controls.lname.invalid && signupForm.controls.lname.touched">
<small> Please enter a valid last name (only letters)! </small>
</div>
<br>
<div class = "form-group">
<input type="text" formControlName='email' placeholder="Your Email address"
value={{edited_values2}}>
</div>
<div *ngIf="signupForm.controls.email.invalid && signupForm.controls.email.touched">
<small> Invalid email address entered! </small>
</div>
<br>
<div class = "form-group">
<input type="password" formControlName='userpassword' placeholder="Your password"
value={{edited_values3}}>
</div>
<div *ngIf="signupForm.controls.userpassword.invalid && signupForm.controls.userpassword.touched">
<small> Password requirements: minimum 8 characters, at least 1 uppercase letter, 1 lowercase letter,
1 number, and 1 special character. </small>
</div>
<br>
<div>
<button type="submit" > Submit </button>
<button type="reset" (click) = "reset()"> Reset </button>
</div>
</form>
</div>
<app-edit
(messageToEmit)="getMessage($event)"
(messageToEmit1)="getMessage1($event)"
(messageToEmit2)="getMessage2($event)"
(messageToEmit3)="getMessage3($event)"
></app-edit>