Question

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

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

问题是，当我点击第2页上的提交按钮时，不会提交输入框中的值。如果我＆＃34;触摸＆＃34;框和输入其他内容，然后提交工作正常，并提交编辑的值。

第一页（我将剩下的代码遗漏掉，这部分工作正常）

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>

我如何强制表格来阅读＆＃34;两个输入字段值没有触及它们？

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上的查询参数预填充输入文本框

1 个答案: