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

Question

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

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

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

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

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>

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

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>

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

Pre-fill input text boxes from query params on Angular 2

angular2-forms

angular2-routing

angular