Угловая 7 установка значений реактивной формы при загрузке компонента включает кнопку сохранения, даже если форма не проверена

Question

У меня следующая проблема. Нажмите, чтобы проверить блиц стека .

Я устанавливаю реактивную форму в конструкторе:

this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});

И в хуке ngOnInti() я получаюданные, относящиеся к unit_id.

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

Проблема в том, что кнопка всегда включена, и что мне нужно сделать, если пользователь хочет обновить этот unit_id, он должен добавить арабскийимя, поэтому кнопка включена.

Если форма действительна, не повредит включение кнопки при загрузке компонента.

Вот метод getData(), который получает данные и устанавливаетгруппа форм управляет значениями:

ngOnInit() {
    this.getDataById();
}

getDataById ():

getDataById() {
    this.showSpinner = true;
    this.auth.getDataById(this.unit_id).subscribe(
      (data) => {
        if (data['info'][0]['total'] == 1) {
          this.noDataBool = false;
          this.showSpinner = false;
          this.family_name_en = data['info'][0]['hh_last_name_en'];
          this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
          this.family_name_ar = data['info'][0]['hh_last_name_ar'];
          this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
          this.unit_id = data['info'][0]['unit_id'];
          this.formGroup.controls['unit_id '].setValue(this.unit_id);
    }
}

Кнопка:

<button mat-raised-button color="warn" (click)="updateData()" [disabled]="!formGroup.valid">
    <mat-icon>update</mat-icon>Update
</button>

Answer 1

Вместо прямого доступа к FormControl s с помощью controls на formGroup, вы должны использовать get API для них.Это даст вам больше контроля и значительно очистит вашу реализацию (особенно в случае получения глубоко вложенных элементов).Вы можете изменить реализацию компонента следующим образом:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  family_name_en;
  family_name_ar;
  unit_id;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
    });
    this.getDataById();
  }

  getDataById() {
    let data: Array<any> = [
      'Ali', '', '123'
    ]
    this.family_name_en = data[0];
    this.formGroup.get('family_name_en').setValue(this.family_name_en);
    this.family_name_ar = data[1];
    this.formGroup.get('family_name_ar').setValue(this.family_name_ar);
    this.unit_id = data[2];
    this.formGroup.get('unit_id').setValue(this.unit_id);
  }

}

Вот Обновленный StackBlitz для вашей ссылки.Вы можете проверить это, набрав علي там, чтобы активировать кнопку Обновить.Ввод Ali позволит отключить его.

Answer 2

Я всегда использую следующий код в таких ситуациях:

this.family_name_ar.setValue(data['info'][0]['hh_last_name_ar']);
this.family_name_ar.updateValueAndValidity();

Вызывая второй метод, updateValueAndValidity() мы сообщаем Angular

Пересчитать значение и статус проверки элемента управления.

Дополнительная информация о угловых документах .

Теперь кнопка должна быть отключена, а форма недействительна, если data['info'][0]['hh_last_name_ar'] пусто.

Вы можете использовать описанные выше методы для каждого поля, которое вам нужно.