Question

我有一个表单，我在输入文本字段中已有值。在提交按钮（更改）之后，未更改的输入字段在json对象中返回空字符串。

＆＃13;

//the component

this.builder = fb;

this.EditUserForm = this.builder.group({

  firstName: ["", Validators.required],

  lastName: ["", Validators.required],

});

＆＃13;

 <form [ngFormModel]="EditUserForm" (submit)="saveChanges($event)">

           <div class="col-xs-2">

             <label for="firstname">First Name</label>

             <input  class="form-control" id="firstname" ngControl="firstName" type="name" required value={{person.firstName}}>

           </div>

           <div class="col-xs-2" >

              <label for="lastname">Last Name</label>

              <input class="form-control" id="lastname"  ngControl="lastName" type="name" required value={{person.lastName}}>

            </div>

      

             <div class="container">

                <button type="submit" class="btn btn-primary">Save Changes</button>

              </div>                  

  </form>

＆＃13;

正如您所看到的，我已经在输入中输入了值。但是ngControl不接受这个。仅当我在输入文本字段中添加更改值时。它显示值person.firstname但不在ngControl中读取它

Answer 1

您必须使用[ngFormControl]来绑定模板中的控件。

//the component

this.builder = fb;

this.EditUserForm = this.builder.group({

  firstName: ["", Validators.required],

  lastName: ["", Validators.required],

});

 <form [ngFormModel]="EditUserForm" (submit)="saveChanges(EditUserForm.values)">

           <div class="col-xs-2">

             <label for="firstname">First Name</label>

             <input  class="form-control" id="firstname" [ngFormControl]="EditUserForm.controls['firstname']" type="name" required value={{person.firstName}}>

           </div>

           <div class="col-xs-2" >

              <label for="lastname">Last Name</label>

              <input class="form-control" id="lastname"  [ngFormControl]="EditUserForm.controls['lastname']" type="name" required value={{person.lastName}}>

            </div>

      

             <div class="container">

                <button type="submit" class="btn btn-primary">Save Changes</button>

              </div>                  

  </form>

Answer 2

其他答案是（使用您的设置），

您可以使用[(ngModel)]指令，该指令可以将您的值与输入控件绑定，并更新ngCtrl状态。

<input ... [(ngModel)]="person.firstName" #firstName="ngForm" ...>

请看这里的工作示例，

https://plnkr.co/edit/hvAG3lLpfP80U9hMKAEA?p=preview

NgFormModel NgControl读取值

2 个答案: