如果用戶不輸入輸入，則將 Reactive 表單字段值設置為 null

Question

我有一個帶有可選輸入的 Angular 反應式表單。 如果用戶在該字段中沒有輸入任何內容並提交該字段，則表單將''（空字符串）發送到數據庫。 是否有默認的 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" />

這也可以使用 Reactive 形式的 valueChanges 屬性來完成。 您可以檢查表單字段的值是否為空，然后將其重置為 null

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

我不知道這是否是實現它的正確方法，但這是兩種可能的方法。