Angular 表格组重新初始化
Angular Form Group reinitialize
在 Angular 8 中,我有一个表单组,我想在其中用新值重新初始化表单。但是当我第二次 fb.build
时,值显示不正确。
复选框变为未选中状态,即使它应该被选中并且输入字段显示 [object Object]
<form [formGroup]="myform" novalidate autocomplete="off">
<mat-checkbox
formControlName="dndcheckbox"
[(ngModel)]="userdetails.DoNotDisturb"
></mat-checkbox>
<mat-form-field>
<input matInput type="text" formControlName="fwdNumber" [(ngModel)]="userdetails.ForwardNumber" />
</mat-form-field>
</form>
userdetails: MyObject;
myform: FormGroup;
constructor(private fb: FormBuilder,) {}
ngOnInit() {
this.myService.refreshDataSubject.subscribe((data) => {
this.userdetails = data;
this.initializeForm();
});
}
initializeForm() {
this.myform = this.fb.group({
dndcheckbox: ['', ''],
fwdNumber: [
{
value: this.userdetails.ForwardNumber,
},
control => validateTelephoneNumber(this.userdetails.ForwardNumber),
],
});
}
可能出了什么问题?
而不是存储在 this.userdetails
中直接作为参数传递给 this.initializeForm(data)
并重新初始化数据参数的值
我认为问题出在您的数据上。您的 userdetails 对象的结构和来自您订阅的服务的数据对象是不一样的。可能是数据没有与用户详细信息相同的签名。控制台检查是否正常。
附加:每次数据更改时您都在创建表单,但这里仅更改值而不更改表单骨架。因此,我认为您只能创建一次表单,当数据发生变化时,只需使用来自您的服务的新值更新表单即可。
As, I am not sure about your object structure, Here I assume your service returns data object like this
{ IsDndChecked: true, ForwardNumber: '123245' }
ngOnInit() {
this.initializeForm();
this.myService.refreshDataSubject.subscribe((data) => {
this.userdetails = data;
this.updateFormValue(data);
});
}
initializeForm() {
this.myform = this.fb.group({
dndcheckbox: [''],
fwdNumber: ['', this.validateTelephoneNumber],
});
}
validateTelephoneNumber(control: AbstractControl) {
alert(control.value);
}
updateFormValue(data: any) {
this.myform.setValue({
dndcheckbox: data.IsDndChecked,
fwdNumber: data.ForwardNumber
});
}
这里在 ngOnInit()
我调用方法 initializeForm()
来创建表单。我正在构建表单一次,当数据更改 updateFormValue()
被调用以更新表单的值时。
另一件事,您可以通过这种方式设置验证器函数 fwdNumber: ['', this.validateTelephoneNumber]
而无需传递值(看我没有将值作为参数发送)。
当您更新字段的值时(您可以从 UI 或使用 setValue() 或 patchValue() 等函数更新值。有关 angular 这两个函数的更多信息反应形式 see here) 特定控件自动传递给其自定义验证器函数。
如果你看到上面的代码片段,你会发现我没有发送任何参数,而是我的方法实现
validateTelephoneNumber(control: AbstractControl) {
alert(control.value);
}
期待特定的 fwdNumber 表单控件。
这样代码更加简洁可控。希望对你有帮助。
在 Angular 8 中,我有一个表单组,我想在其中用新值重新初始化表单。但是当我第二次 fb.build
时,值显示不正确。
复选框变为未选中状态,即使它应该被选中并且输入字段显示 [object Object]
<form [formGroup]="myform" novalidate autocomplete="off">
<mat-checkbox
formControlName="dndcheckbox"
[(ngModel)]="userdetails.DoNotDisturb"
></mat-checkbox>
<mat-form-field>
<input matInput type="text" formControlName="fwdNumber" [(ngModel)]="userdetails.ForwardNumber" />
</mat-form-field>
</form>
userdetails: MyObject;
myform: FormGroup;
constructor(private fb: FormBuilder,) {}
ngOnInit() {
this.myService.refreshDataSubject.subscribe((data) => {
this.userdetails = data;
this.initializeForm();
});
}
initializeForm() {
this.myform = this.fb.group({
dndcheckbox: ['', ''],
fwdNumber: [
{
value: this.userdetails.ForwardNumber,
},
control => validateTelephoneNumber(this.userdetails.ForwardNumber),
],
});
}
可能出了什么问题?
而不是存储在 this.userdetails
中直接作为参数传递给 this.initializeForm(data)
并重新初始化数据参数的值
我认为问题出在您的数据上。您的 userdetails 对象的结构和来自您订阅的服务的数据对象是不一样的。可能是数据没有与用户详细信息相同的签名。控制台检查是否正常。
附加:每次数据更改时您都在创建表单,但这里仅更改值而不更改表单骨架。因此,我认为您只能创建一次表单,当数据发生变化时,只需使用来自您的服务的新值更新表单即可。
As, I am not sure about your object structure, Here I assume your service returns data object like this { IsDndChecked: true, ForwardNumber: '123245' }
ngOnInit() {
this.initializeForm();
this.myService.refreshDataSubject.subscribe((data) => {
this.userdetails = data;
this.updateFormValue(data);
});
}
initializeForm() {
this.myform = this.fb.group({
dndcheckbox: [''],
fwdNumber: ['', this.validateTelephoneNumber],
});
}
validateTelephoneNumber(control: AbstractControl) {
alert(control.value);
}
updateFormValue(data: any) {
this.myform.setValue({
dndcheckbox: data.IsDndChecked,
fwdNumber: data.ForwardNumber
});
}
这里在 ngOnInit()
我调用方法 initializeForm()
来创建表单。我正在构建表单一次,当数据更改 updateFormValue()
被调用以更新表单的值时。
另一件事,您可以通过这种方式设置验证器函数 fwdNumber: ['', this.validateTelephoneNumber]
而无需传递值(看我没有将值作为参数发送)。
当您更新字段的值时(您可以从 UI 或使用 setValue() 或 patchValue() 等函数更新值。有关 angular 这两个函数的更多信息反应形式 see here) 特定控件自动传递给其自定义验证器函数。
如果你看到上面的代码片段,你会发现我没有发送任何参数,而是我的方法实现
validateTelephoneNumber(control: AbstractControl) {
alert(control.value);
}
期待特定的 fwdNumber 表单控件。
这样代码更加简洁可控。希望对你有帮助。