typescript 重置Angular React形式排除特定字段

3zwjbxry  于 2023-04-13  发布在  TypeScript
关注(0)|答案(7)|浏览(111)

与参考(https://stackoverflow.com/questions/50197347/how-to-reset-only-specific-fields-of-form-in-angular-5),我有20字段的形式,如果用户点击重置选项,我需要重置形式排除2字段,如果我使用这个.form.reset()意味着它重置每一件事,任何帮助赞赏

qgzx9mmu

qgzx9mmu1#

看看onReset()方法,这段代码将重置除namedescription字段之外的所有内容。

formGroup: FormGroup = /* init the formGroup... */

onReset() {
    this.formGroup.reset({
        name: this.formGroup.get('email').value, 
        description: this.formGroup.get('description').value
    });
}

Stackblitz repro

zpjtge22

zpjtge222#

您可以迭代FormGroup的控件,如果控件名称与排除列表中的控件名称匹配,则不重置它:

const exclude: string[] = ['formControlName1', 'formControlName2'];

Object.keys(this.form.controls).forEach(key => {
   if (exclude.findIndex(q => q === key) === -1) {
       this.form.get(key).reset();
   }
});
busg9geu

busg9geu3#

你可以给reset函数提供一个reset值,只给予它两个字段的值,剩下的应该是空的。

const resetValue = {};

for (const key of this.form.value) {
  resetValue[key] = '';
}

resetValue.firstFieldToKeep = this.form.get('firstFieldToKeep').value;
resetValue.secondFieldToKeep = this.form.get('secondFieldToKeep').value;

this.form.reset(resetValue);
qlckcl4x

qlckcl4x4#

您可以将一个对象传递给reset函数,其中Key作为formControl,value作为您希望控件在reset时具有的值。

this.form.reset({
  fomrControl1:value1,
  formControl2:value2
});

如果你想改变字段的行为,比如禁用或启用,只需传入一个Object而不是一个值。例如:

this.form.reset({
  fomrControl1:{value:value1, disabled:true}, // disables this field on reset
  formControl2:value2
});
kpbwa7wx

kpbwa7wx5#

我会保留这两个输入值,重置表单,然后再次修补这两个。

const keepValues = [
   this.form.controls.keepThis1.value,
   this.form.controls.keepThis2.value,
];
this.form.reset();
this.form.controls.keepThis1.patchValue(keepValues[0]);
this.form.controls.keepThis2.patchValue(keepValues[1]);
jq6vz3qz

jq6vz3qz6#

我们来创建一个函数reset(),并使用如下语法重置18字段。

resetForm(){

    this.form.controls.formField1.reset("");
    this.form.controls.formField2.reset("");
    .
    .
    this.form.controls.formField18.reset("");
 }

谢谢你。

dgsult0t

dgsult0t7#

我遵循了一个快捷方式,我重置了完整的表单,然后我修补了一个不需要重置的控件的值。

onCancelClick(form: NgForm) {
        form.resetForm();
        Object.keys(form.controls).forEach(name => {
            if (name == "email") {
                form.controls[name].patchValue(this.emailOfmember);
            }
        });
}

相关问题