为什么这种带有动态输入值的表单验证不起作用？答案

【问题标题】：Why is this form validation with dynamic input values not working?为什么这种带有动态输入值的表单验证不起作用？
【发布时间】：2020-04-02 18:21:03
【问题描述】：

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

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

这里是必要的代码：

子组件-ts文件

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

【问题讨论】：

你没有在你的父母中做任何事情来设置任何表单值？
@MikeOne 我正在使用子组件作为父组件。通信。在父组件 html- 内的输入标签中，值由 {{}} 内的数据绑定设置。此 html 文件中的最后几行也接收来自子组件的值
值仅用于初始设置。我认为您可能需要重新考虑一下。
你想要的其实很简单，也可以在没有所有不同的事件处理程序的情况下完成..
@MikeOne 实际上我在这里放的只是必要的代码，可能看起来像初始设置。实际上，每次单击按钮时，这些值都来自子组件。我的问题是，这个表单没有检测到动态绑定的值。

标签： angular typescript angular-reactive-forms angular-components angular-validation

【解决方案1】：

@ASHISH，当您使用 ReactiveForms 时，不使用 [value]，在输入中，它只是 formControlName

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

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

您需要使用“方法”setValue 更改值，因此您的函数 getMessage 必须像

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

【讨论】：