Why is this form validation with dynamic input values not working?

Question

Just started practicing angular... I have made a reactive form (in parent component) in angular whose values are dynamically filled by child component. On submitting this form null values are saved since form is not detecting the values although values are visible in input fields.

Note: input values are showing in parent component (child to parent communication is successful)

Here is the necessary code:

Child component- ts 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="text" value="{{thing.l}}"  id="{{ 'l' + i }}"> </td>
  <td><input type="text" value="{{thing.e}}"  id="{{ 'u' + i }}"> </td>
  <td><input type="text" value="{{thing.p}}"  id="{{ 'p' + i }}"> </td>
  <td >
    <button (click) = "save(thing,i)">Edit</button>
    </td>
  </tr> 
  </table>

Parent component - ts 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> Enter name please (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> Enter name please (only letters)!  </small>
</div>
<br>
<div class = "form-group">
<input type="text" formControlName='email' placeholder="your Email id"
value={{edited_values2}}>
</div>
<div *ngIf="signupForm.controls.email.invalid && signupForm.controls.email.touched">
<small>  Email is invalid  </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> Must enter password in correct format: min 8 characters, at least 1 uppercase, 1 lowercase, 
1 number, 1 special:  </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)"
 (messageToEmit4)="getMessage4($event)" 
 ></app-edit>

Answer 1

@ASHISH, when you use ReactiveForms NOT use [value], in the inputs, it's only formControlName

<!---WRONG--->
<input type="text" formControlName='fname' placeholder="your First name" value={{edited_values}}>

<!--OK-->
<input type="text" formControlName='fname' placeholder="your First name" >

And you need change the value using the "method" setValue, so yours functions getMessage must be like

getMessage(message: string) {
   this.signupForm.get('fname').setValue(message)
}