![](/img/trans.png)
[英]Reactive Forms check form fields empty or default and disable button Angular
[英]Angular Reactive Forms - Exclude empty fields on form submit
我試圖只從表單中獲取用戶輸入的值的字段。 從中得到的JSON對象仍然包含用於空輸入的空引號(請參見下文)。 有沒有一種方法可以在提交表單時排除空白字段? 謝謝!
當前: { "user": "", "directory": "documents", "filename": [ "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);
}
這是供您參考的示例StackBlitz 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.