Значение элемента управления формы становится нулевым OnSubmit при отключении

Question

У меня есть следующая форма Angular 7:

ngOnInit() {

  this.organizationId = 1; // Used for testing

  this.form = this.formBuilder.group({     
    name: [''],
    organizationId: [{ value: this.organizationId, disabled: this.enableOrganizationChange }],
    start: ['']
  });

}

В HTML я использую Select для OrganizationId. Это отключено, как и ожидалось.

Однако при отправке значение равно null, а не 1:

onSubmit() {

  if (this.form.valid) {

    this.submitting = true;

    console.log(this.form.value.organizationId);

    let request: Request = { 
      name: this.form.value.name,
      organizationId: this.form.value.organizationId.value,
      start: this.form.value.start
    };

  }

}

Почему зарегистрированное значение null, а не 1?

Я использую отключено, чтобы пользователь не мог изменить значение.

Но мне все еще нужно значение при отправке ...

Answer 1

Как вы заметили, Angular игнорирует отключенные элементы управления формой в объекте формы.

Это можно легко исправить с помощью getRawValue (), который включает в себя все элементы управления формой, отключены или нет. Например, при отправке вы передаете форму (НЕ значение формы) следующим образом:

(ngSubmit)="onSubmit(form)" 
Then you can use getRawValue:

onSubmit() {
  console.log(form.getRawValue())
}

Обратите внимание, что все это происходит с использованием NgForms, а не ReactiveForms. Вы можете изменить Foractive Forms соответственно, просто добавив getRawValue() как: console.log(this.form.organizationId.getRawValue());