Angular 6 Чтение пустого входного значения

Question

Я получаю значение от сервера PHP до углового значения 6 через HttpClient, и это значение отправляется на formControlInput для установки в качестве значения по умолчанию:

<mat-form-field color="warn">
    <input matInput formControlName="unit_type" 
    placeholder="Unit type" value="{{unit_type}}">
</mat-form-field>

Я сохраняю то же значение в переменной, чтобы сравнить его со значением ввода, чтобы я мог обнаружить изменение, чтобы узнать, активирую ли я кнопку обновления или нет:

this.unit_type = data['unit_info'][0]['unit_type'];

Значение этой переменной отображается правильно, а значение отображается внутри ввода.

Теперь, когда я получаю значение снова, как показано ниже:

unit_type_upd = this.formGroup.controls['unit_type'].value;
console.log(unit_type_upd);

Оно показывает мне пустое значение, но когда я его изменяю, оно обнаружит изменение и выполнит процесс сравнения.

Почему unit_type_upd не получает значение, отображаемое на входе при загрузке компонента?

Answer 1

value атрибуты не должны использоваться в Angular: они очень запутанные.

В вашем случае вы действительно устанавливаете значение по умолчанию: но вы устанавливаете только значение входного HTML-кода, а не Angular!

Чтобы исправить значение по умолчанию, необходимо создать группу форм:

this.formGroup = this.formBuilder.group({
  unit_type: 'default value here'
});

Если вы хотите сохранить первое значение вашей формы, сохраните его после создания формы:

this.defaultValue = this.formGroup.value;

Теперь вы можете использовать метод сброса, чтобы сбросить его:

this.formGroup.reset(this.defaultValue);

И если вы хотите проверить, изменилось ли значение, вам не нужно сравнивать два значения; просто проверьте статус формы! (либо dirty, либо touched, посмотрите, что вам больше подходит)

Вот ваш HTML:

<mat-form-field color="warn">
    <input matInput formControlName="unit_type" placeholder="Unit type">
</mat-form-field>

Answer 2

Когда вы используете Angular Reactive Form, вам не следует привязывать данные к таким свойствам, как

value="{{unit_type}}"

Правильный путь в вашем компоненте

this.formGroup.controls['unit_type'].setValue(this.unit_type)

Вы можете установить значение по умолчанию при создании вашего FormControl, как это

new FormControl('default value', [Validators.required]);