从Angular 2上的查询参数预填充输入文本框

Question

我在一个页面上有一个带有2个输入框的表单,当我单击提交时,路由器导航到另一个页面,其中包含2个输入框和一个提交按钮.

到目前为止,我已设法将查询参数传递到第二页并预填充输入框.

问题是,当我点击第2页的提交按钮时,输入框中的值不会被提交.如果我"触摸"框并输入其他内容,则提交工作正常并且正在提交编辑的值.

第一页(我将剩下的代码遗漏,这部分工作正常)

this._router.navigate(['/dashboard/test/new'], 
{ queryParams: {'name': this.name.value , 'lastname':this.lastname.value}});

第2页

private subscription: Subscription
paramName: string;
paramLastName: string

this.subscription = this.activatedRoute.queryParams.subscribe(
  params => {
    this.paramName     = params['name'];
    this.paramLastName = params['lastname'];
  }
)

这是html:

<form [formGroup]="myFormTest" (ngSubmit)="onSubmitNew()" class="onl_loginForm" novalidate>
      <div class="form-group">
        <label for="name" class="control-label">Name </label>
        <input type="text" formControlName="name" class="form-control" id="name"  value="{{paramName}}" required>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label">Last Name </label>
        <input type="text" formControlName="lastName" class="form-control" id="lastname" value="{{paramLastName}}" required>
      </div>
<button type="submit" class="btn-save">Submit</button>
</form>

如何强制表单"读取"两个输入字段值而不触及它们？

Answer 1

NOTE:不要"{{}}"一起使用绑定.

1)你可以使用[(ngModel)],

<input type="text" formControlName="name" 
                   class="form-control" id="name"  
                   [(ngModel)]="paramName" required>

<input type="text" formControlName="lastName" 
                   class="form-control" id="lastname" 
                   [(ngModel)]="paramLastName" required>

2) OR [value]绑定属性angular2方式,

<input type="text" formControlName="name" 
                   class="form-control" id="name"  
                   [value]="paramName" required>

<input type="text" formControlName="lastName" 
                   class="form-control" id="lastname" 
                   [value]="paramLastName" required>