1

在我通过单击按钮动态设置输入值后，Angular 的表单验证器似乎不会检查输入项是否有效。

在我的表单上，我有一个按钮，单击该按钮会调用 API 并使用返回的数据来填充某些字段。但是，我使用的方法不会调用 angulars 验证检查器。这可能是因为用户实际上并没有点击表单字段并手动设置数据......因此，验证器永远不会被激活。如果用户确实在该字段中键入了一些数据，则该表单将得到很好的验证。

我可以克服这个错误的最佳方法是什么？我是否采取了错误的方法来设置这些值？我希望验证表单，但用户不必单击并键入字段值。

我在 StackBlitz 上创建了我的表单的精简版。在这里查看

下面是相同的代码：

app.component.html：

<form [formGroup]="generalFormGroup">
  <button type="button" (click)="populateData()">Populate default data</button>
  <input type="text" placeholder="Title" formControlName="inputTitle" [value]="itemTitle" (input)="itemTitle = $event.target.value">
  <button type="button" (click)="onSubmit()" [disabled]="generalFormGroup.invalid">Save</button>
</form>

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  generalFormGroup: FormGroup;
  itemTitle = '';

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.itemTitle = '';
    this.generalFormGroup = this.formBuilder.group({
      inputTitle: [this.itemTitle, Validators.required]
    });
  }

  populateData() {
    this.itemTitle = 'Some title here';
  }

  onSubmit() {
    if (this.generalFormGroup.valid) { console.log('the form is valid'); }
    else { console.log('the form is invalid'); }
  }
}
4

3 回答 3

2

在角度使用反应形式时，您应该更新模型中的值而不是更新模板中的值。在您的示例中，您使用 value 属性来更新值，它不会更新 ts 文件中的 formControl 实例。从模板中删除 value 属性。使用表单控件setValue或 patchValue 动态设置值。

组件.html

<form [formGroup]="generalFormGroup">
  <button type="button" (click)="populateData()">Populate default data</button>
  <input type="text" placeholder="Title" formControlName="inputTitle">
  <button type="button" (click)="onSubmit()" [disabled]="generalFormGroup.invalid">Save</button>
</form>

组件.ts

 populateData() {
    this.generalFormGroup.get('inputTitle').setValue('some title here');
  }

例子

于 2020-01-13T14:43:46.050 回答
1 
populateData() {
    this.generalFormGroup.setValue({itemTitle: 'Some title here'});
}

您也可以.patchValue根据您的用例使用

于 2020-01-13T14:26:39.373 回答
0

在反应形式中不需要使用 value 属性。Formcontrler 足以绑定值。

如果所有字段都被 midified，那么您可以使用 setValue。或者一些字段匹配然后使用patchvalue

于 2020-01-13T15:57:43.440 回答