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

Question

我在一个页面上有一个带有 2 个输入框的表单，当我单击提交时，路由器会导航到另一个带有 2 个输入框和一个提交按钮的页面。

到目前为止，我已经设法将查询参数传递到第二页并预先填写了输入框。

问题是，当我点击第 2 页上的提交按钮时，输入框中的值没有提交。如果我“触摸”这些框并输入其他内容，则提交工作正常并且正在提交编辑的值。

第一页（我省略了其余代码，这部分工作正常）

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

第二页

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) 或 [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>