如果用户未输入输入，则将"反应表单"字段值设置为null

Question

我有一个带有可选输入的Angular Reactive Form。如果用户未在字段中输入任何内容并提交字段，则表单会将"(空字符串(发送到数据库。是否有默认的Angular方式将"null"作为该字段的值而不是空字符串发送到数据库(假设字段中没有输入值(？

Answer 1

我也遇到过类似的问题，在中我有一个文本框，当它为空时，必须发送null而不是空字符串。我决定在angular中创建一个指令，在该指令中，我使用hostlistener检查值是否为空字符串，然后将其重置为null。

@Directive({
selector: '[appEmptyToNull]'
})
export class EmptyToNullDirective {
constructor(@Self() private ngControl: NgControl) { }
@HostListener('keyup', ['$event']) onKeyDowns(event: KeyboardEvent) {
if (this.ngControl.value?.trim() === '') {
this.ngControl.reset(null);
}
}
}

在HTML中，你可以使用类似的指令

<input type="text" appEmptyToNull formControlName="firstname" />

这也可以使用响应表单中的valueChanges属性来完成。您可以检查表单字段的值是否为空，然后将其重置为空

this.form.get("firstname").valueChanges.subscribe((response: string)=> {
console.log("valuechanges -> ",response)
if (response?.length == 0) {
this.form.get("firstname").setValue(null)
}
})

我不知道这是否是实现它的正确方法，但这是两种可能的方法

Answer 2

您可以将字段值设置为空

this.someForm = this.fb.group({isbn: new FormControl(null, Validators.pattern(/^d{10}$|^d{13}$/)) })

如果你不想发送一个空字符串。