在页面加载后动态注入输入值后，如何让 Angular 8 验证我的表单字段？

Question

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

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

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

我在 StackBlitz 上创建了一个精简版的表单。查看它Here

下面是相同的代码：

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'); }
  }
}

Answer 1

populateData() {
    this.generalFormGroup.setValue({itemTitle: 'Some title here'});
}

您还可以使用 .patchValue，具体取决于您的用例

Answer 2

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

component.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>

component.ts

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

Example

Answer 3

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

如果所有字段都经过了中间化，那么您可以使用 setValue。或者一些字段被匹配然后使用patchvalue

在页面加载后动态注入输入值后，如何让 Angular 8 验证我的表单字段？

How to get Angular 8 to validate my form fields after I dynamically inject input values after the page has loaded?

angular

angular-validation

angular-formbuilder