Блог

В моем приложении Angular у меня есть некоторые входные данные, подключенные к FormControl. Когда я удаляю обычное поле ввода, если я проверяю значение в соответствующем FormControl, у меня есть '' .

Это проблема, потому что серверу требуется null значение вместо '' , поэтому на данный момент у меня есть метод в службе, который перестраивает мой объект, помещая null значение на '' место.

Итак, есть ли способ сделать это в лучшем режиме? Какова наилучшая практика в этом случае?

Простым способом было бы подписаться на изменения значения элемента управления формой, реагировать на случаи, когда значение является пустой строкой, а затем установить значение в null . Упрощенный пример:

 import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  template: `
    <input type="text" [formControl]="formControl"><br/>
    Current value: {{ formControl.value |json }}
  `
})
export class FormComponent {

  formControl = new FormControl();

  constructor() {
    this.formControl.valueChanges.subscribe(value => {
      if (value === '') {
        this.formControl.patchValue(null);
      }
    });
  }
}
  

Конечно, это зависит от вашего варианта использования, если это действительно выполнимо. Если у вас много элементов управления формой, которыми вы не можете управлять централизованно, вам может потребоваться придумать другое решение.

Что-то немного более сложное, но выполнимо, это добавить перехватчик HTTP, который заменяет пустые строки на null в ваших телах запросов, отправляемых на ваш сервер.

Мой подход — другой. Обычно вы отправляете данные в службу, поэтому в службе, где вы проверяете значения. например

 saveData(data:any)
{
    data.name=data.name ||null
    data.address.address2=data.address.address2 || null
    ....
    data.myarrayOfFormGroup.forEach(x=>{
       x.value=x.value|| null
    })
    data.myArrayOfFormControls=data.myarrayOfFormControl.map(x=>x||null)
    this.httpClient.pos("...",data)
}