Angular 6 FormGroup.disable () метод не работает с моим NgForm, управляемым шаблоном - PullRequest
Новая
       119

Angular 6 FormGroup.disable () метод не работает с моим NgForm, управляемым шаблоном

0 голосов
/ 03 июля 2018

Когда я пытаюсь использовать метод отключения для formGroup в моем приложении Angular 6, я получаю эту ошибку в консоли браузера:

TypeError: this.personForm.disable не является функцией

Хотя метод упоминается в документации и даже предлагается VS Code, как в этом снимке. Even VS Code is suggesting the method

Мой код здесь: 

// ... many parts skipped, the form here is template driven 
// but still personForm is a FormGroup , 
// I am trying to disable the whole FormGroup with all child elements
@ViewChild('personForm') personForm: FormGroup;

        if (true) {
       // if I console.log here the form, I can see it is created already
         console.log(this.personForm);              
// output of console.log is 
// NgForm {submitted: false, _directives: Array(0), ngSubmit: EventEmitter, form: FormGroup}

         this.personForm.disable();
        }

В чем здесь проблема?

ОБНОВЛЕНИЕ 1:

Я создал стек, чтобы показать проблему

вот ссылка на эту демонстрацию

ОБНОВЛЕНИЕ 2: Так как ошибка не отображается при начальной загрузке, если вы удалите this.firstStepForm.disable(); и перезапишите его, вы получите ошибку, но в любом случае поведение будет неправильным, поле формы не будет отключено, как ожидалось

Кроме того, при обновлении части браузера в stackblitz будет отображаться ошибка «Snackbar»

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Я обнаружил причину этой ошибки:

Эта форма сделана в html-шаблоне с использованием ngForm , затем Я использовал ViewChild, чтобы получить форму в файле машинописного текста , я заметил, что я сделал это объект типа FormGroup , но ngForm отличается от FormGroup (в моих случаях использования это было непонятно), поэтому метод отключения FormGroup не работает на ngForm

Примечание:

(VS код предлагает это, поскольку мой тип для этой переменной - FormGroup, который вводит в заблуждение редактор, чтобы дать мне это предложение)

Спасибо всем, кто пытался помочь.

Обновление:

В случае, если кто-то не хочет зависеть от deteChanges () как я & Опираясь на превосходный ответ Amit, мы можем отключить NgForm в этом AfterContentChecked, чтобы избежать использования detectChanges () 

  // instead of disabling here & using cdr.detectChanges()

  // ngAfterViewChecked() {
  //     console.log(this.personForm.form);    
  //     this.personForm.form.disable(); 
  //     this.cdr.detectChanges();  
  // } 

  // we can put our disable here
  ngAfterContentChecked() {
    this.personForm.form.disable();
  }

Демонстрация Stackblitz

0 голосов
/ 03 июля 2018

Объект формы, созданный с использованием подхода на основе шаблонов, имеет тип NgForm, а не FormGroup

Внутри ngForm есть атрибут form, который на самом деле имеет тип FormGroup.

Так что вы должны делать 

this.personForm.form.disable()

РЕДАКТИРОВАТЬ:

Вы должны переместить свой код в AfterViewChecked событие ловушки жизненного цикла, так как ваш formGroup не будет готов ngAfterViewChecked() запущен. 

ngAfterViewChecked() {
      console.log(this.personForm.form);    
      this.personForm.form.disable(); 
      this.cdr.detectChanges();  
}

А также отложить обнаружение изменений, чтобы избежать ошибки изменения выражений с помощью ChangeDetectorRef.

DEMO

...