我试图仅从表单中获取包含用户输入值的字段。生成的 JSON 对象仍然包含空输入的空引号(见下文)。有没有办法在表单提交时排除空字段?谢谢!
当前:
{ "用户": "", "目录": "文档", "文件名": [ "a", "", ""] }
目标:{ "directory": "documents", "filename": [ "a"] }
最佳答案
如果您没有为表单控件分配空值,那么这些控件将自动为 null
。
考虑这就是您创建表单的方式:
import { Component } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private fb: FormBuilder) {}
userForm = this.fb.group({
user: [],
directory: [],
filename: this.fb.array([])
});
addFile() {
(<FormArray>this.userForm.get('filename')).push(this.fb.control(null));
}
get files() {
return (<FormArray>this.userForm.get('filename')).controls;
}
onSubmit() {
console.log(this.userForm.value);
}
}
对于未填写的字段,表单值将产生 null
。然后,您可以将它们从 value
中删除,如下所示:
onSubmit() {
let formValue = { ...this.userForm.value };
for (let prop in formValue) {
if (!formValue[prop]) {
delete formValue[prop];
}
if (Array.isArray(formValue[prop])) {
let resultArray = formValue[prop].filter(item => item);
if (resultArray.length > 0) {
formValue[prop] = resultArray;
} else {
delete formValue[prop];
}
}
}
console.log(formValue);
}
这是一个Sample StackBlitz供您引用。
关于javascript - Angular Reactive Forms - 排除表单提交上的空白字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53178831/