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

Posted 2023-03-13

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

【英文标题】：Pre-fill input text boxes from query params on Angular 2

【发布时间】：2017-03-12 03:13:00

【问题描述】：

我在一个页面上有一个带有 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>

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

【参考方案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>

【讨论】：

谢谢！ [(ngModel)] 方法有效，[value] 预填充了输入框，但它们被提交为 null（就像在我的代码中一样）。

是的，他们不会，因为他们只是绑定值。而提交表单使用formControl。所以这行不通。如果你想让它们工作，你应该使用（在 TS 代码中 - 我觉得你正在使用 formBuilder）类似name:[paramName , ....] 语法。