时间戳

首页 > 解决方案 > 反应式表单中的 value 属性不初始化表单控件名称

angular - 反应式表单中的 value 属性不初始化表单控件名称

问题描述

我正在使用反应式表单，其中我想要两种方式数据绑定，因此我使用“值”属性来初始化表单组的默认值。因为表单组在 ngFor 循环中，但是当我尝试获取表单时，我只获得编辑的值并且无法获得默认值，我似乎“值”属性没有初始化表单控件，它只显示在 DOM 中。

TS：

 userForm: FormGroup;

 constructor(private fb: FormBuilder){}

 ngOnInit(){
    this.userForm = this.fb.group({
  userName: [''],
  fullName: [''],
  email: [''],
 });
   }

OnUpdateClick() {

 console.log(this.userForm.get('userName').value);
 console.log(this.userForm.get('fullName').value);
 console.log(this.userForm.get('email').value);

 }

HTML：

   <div *ngFor="let agent of agents">

    <form [formGroup]="userForm" >

                    <mat-form-field >
                      <mat-label>Name</mat-label>
                      <input matInput id="Name" name="name" value=" 
                     {{agent.username}}" formControlName="userName">
                    </mat-form-field>

                    <mat-form-field >
                      <mat-label>Name</mat-label>
                     <input matInput id="FName" name="Fname" value=" 
                     {{agent.fullName}}" formControlName="fullName">
                    </mat-form-field>

                      <mat-form-field >
                      <mat-label>Name</mat-label>
                     <input matInput id="email" name="email" value=" 
                     {{agent.email}}" formControlName="email">
                    </mat-form-field>

              <button (click)="OnUpdateClick()"> SAVE </button>

   </div>

当我尝试在“OnUpdateClick”函数中获取表单字段时，我只得到那些我弄脏的值，未触及的控件也应该返回它们的默认值

标签： angulartypescriptangular-reactive-forms

解决方案

Raza，首先，说，使用 ReactiveForm，实际上我们并没有绑定数据，我们创建了一个表单，所以在 form.value 我们有数据。您可以在 .html 中看到写入 - 只是为了检查-

{{userForm?.value|json}}

我喜欢创建一个函数

constructor(private fb: FormBuilder){}

createForm(data:any):FormGroup
{
   return this.fb.group({
      userName: [data?data.userName:null],
      fullName: [data?data.fullName:null],
      email: [data?data.email:null],
   });
}

如果你有一个独特的代理你可以做，什么时候有一个代理

ngOnInit(){
    this.userForm = this.createForm(agent);
}

如果您的代理是从呼叫到服务

ngOnInit(){
    this.mayService.getAgent().subscribe(data=>
    {
        this.userForm = this.createForm(data);
    })
}

好吧，你有一个代理数组，我不知道你想在 userForm .value 中得到什么。如果您想获取对象数组，请考虑 Dhara 的回复和我的评论

myArrayForm:ArrayForm; //declare an array Form
ngOnInit(){
    this.myArrayForm= this.fb.array(agents.map(a=>this.createForm(a));
    //Its a abreviate way to say
    //this.myArrayForm=[];
    //for (let i = 0; i < this.agents.length; i++) {
    //     this.userDataArray.push(agents[i]);
    //}       
}

和 .html

<form [formGroup]="myArrayForm" (submit)="save(myArrayForm)" >
      <div *ngFor=" let agent of myArrayForm.controls;let i = index"
           [formGroupName]="i">
         <mat-form-field >
             <mat-label>User Name</mat-label>
             <input matInput id="Name" name="name"  formControlName="userName">
         </mat-form-field>
         <mat-form-field >
              <mat-label>Full Name</mat-label>
              <input matInput id="FName" name="Fname"  formControlName="fullName">
         </mat-form-field>
         <mat-form-field >
              <mat-label>E-mail</mat-label>
              <input matInput id="email" name="email" formControlName="email">
         </mat-form-field>
      </div>
    </div>
    <button> SAVE </button>
</form>

save(myForm)
{
   console.log(myForm.value)
}

但是你可以想要一个 FormGroup 的数组

myArray:FormGroup[] //declare an array of FormGroup
ngOnInit(){
    this.myArray= agents.map(a=>this.createForm(a));
    //Its a abreviate way to say
    //this.myArray=[];
    //for (let i = 0; i < this.agents.length; i++) {
    //     this.myArray.push(this.createForm(agents[i]));
    //}       
}

和 .html

<form *ngFor="let form of myArray" [formGroup]="form">
     <mat-form-field >
         <mat-label>User Name</mat-label>
         <input matInput id="Name" name="name"  formControlName="userName">
     </mat-form-field>
     <mat-form-field >
          <mat-label>Full Name</mat-label>
          <input matInput id="FName" name="Fname"  formControlName="fullName">
     </mat-form-field>
     <mat-form-field >
          <mat-label>E-mail</mat-label>
          <input matInput id="email" name="email" formControlName="email">
     </mat-form-field>
</form>
<button (click)"save()"> SAVE </button>

save()
{
    myArray.forEach(form=>{
        console.log(form.value)
    }
}

推荐阅读