什么是表单验证，它的作用是什么

Question

刚开始练习有角...我在角上做了一个反应形式（在父组件中），其值由子组件动态填充。提交此表单时，将保存空值，因为尽管在输入字段中可见值，但表单未检测到这些值。

注意：输入值显示在父组件中（子对父通信成功）

这里是必要的代码：

子组件文件

@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);

子组件-html文件

  <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>

父组件-ts文件

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();

父组件-html文件

<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>

什么是表单验证，它的作用是什么

为什么使用动态输入值进行此表单验证不起作用？