Angular 的表单验证器似乎不会在我通过单击按钮动态设置输入值后检查输入项是否有效。
在我的表单上，我有一个按钮，单击该按钮时会调用 API，并使用返回的数据填充一些字段。 但是，我使用的方法不会调用角度验证检查器。 这可能是因为用户实际上从未单击进入表单字段并手动设置数据...因此，验证器永远不会被调用。 如果用户确实在字段中键入了一些数据，则表单将得到验证。
克服此错误的最佳方法是什么？ 我是否采用了错误的方法来设置这些值？ 我希望验证表单，但用户不必单击并键入字段值。
我已经在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'); }
}
}
在角度中使用响应式形式时，您应该更新模型中的值，而不是更新模板中的值。在您的示例中，您使用 value 属性来更新值，它不会更新 ts 文件中的 formControl 实例。从模板中删除值属性。使用表单控件 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');
}
例
populateData() {
this.generalFormGroup.setValue({itemTitle: 'Some title here'});
}
您还可以使用.patchValue，具体取决于您的用例
在响应式表单中不需要使用值属性。Formcontrler足以绑定值。
如果所有字段都进行了中间化，那么您可以使用 setValue。或者某些字段匹配，然后使用补丁值