Отправить нулевой объект с FormBuilder

Question

Если получить объект из серверной службы API, например:

data: {firstName:'pepe',lastName:'test', address = {street: 'Cervantes', city:'Villajoyosa'} } or data: {firstName:'pepe',lastName:'test', address = null }

Я хочу установить объект в formGroup, но у меня возникает проблема, когда адрес становится нулевым, я хотите сохранить адрес как ноль, а не как {улица: '', город: ''}}

     form = this.fb.group({
            firstName: [''],
            lastName: [''],
            address: this.fb.group({
              street: [''],
              city: [''],
            }),
          });
    // and I set the form:
    if(data.address)
    this.form.controls['address'].setValue(data.address)
save(){
valueToSend = this.form.controls['address'].getValue()
}
// template
<button (click)=save()>Save</button>
    <div formGroupName="address">
      <h3>Address</h3>
      <label>
        Street:
        <input type="text" formControlName="street">
      </label>
      <label>
        City:
        <input type="text" formControlName="city">
      </label>
    </div>

Answer 1

Вы застряли со структурой формы, которую вы определили, поэтому при отправке формы вам необходимо иметь некоторые логи преобразования c.

Например:

const { firstName, lastName, address } = this.form;
const value = {
    firstName,
    lastName,
    address: address.street || address.city ? address : null
};

Вы также можете инкапсулировать эту логику c в компонент, который реализует ControlValueAccessor, как в следующем примере:

@Component({
  selector: "app-address",
  template: `
    <div [formGroup]="form">
      <input formControlName="street" />
      <input formControlName="city" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AddressComponent),
      multi: true
    }
  ]
})
export class AddressComponent implements ControlValueAccessor, OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      street: [""],
      city: [""]
    });
  }

  writeValue(obj: any): void {
    this.form.setValue(obj);
  }

  registerOnChange(fn: any): void {
    this.form.valueChanges.pipe(map(x => x.city || x.street ? x : null)).subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    //TODO
  }

  setDisabledState(isDisabled: boolean): void {
    //TODO
  }
}

Рабочая демонстрация на Stackblitz

Answer 2

не беспокойтесь о форме, пока не сохраните данные. В отправке

save()
{
  const data={...this.form.value,address:...this.form.value.address} //<--create a copy
  if (!data.address.city && !data.address.street)
  {
       data.address=null;
  }
  ..make something with the data..
  myService.update(data)
}

Answer 3

Используйте директиву * ngIf, чтобы проверить свой адрес перед тем, как отобразить его в своем домике

<div formGroupName="address" *ngIf="data?.address" >
  <h3>Address</h3>
  <label>
    Street: 
    <input type="text" formControlName="street">
  </label>
  <label>
    City:
    <input type="text" formControlName="city">
  </label>
</div>