Angular - NgForm - FormControl не определен

Question

У меня есть страница, где есть простая форма NgForm, я пытаюсь отключить определенное поле после загрузки страницы / представления.

Но я получаю неопределенное исключение:

ОШИБКА TypeError: Невозможно прочитать свойство 'disable' из неопределенного

код component.ts:

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'sub',
  templateUrl: 'sub.component.html'
})

export class SubComponent implements OnInit, AfterViewInit {
  @ViewChild('userForm') uf: NgForm;

  ngOnInit() {
    console.log(this.uf);
    console.log(this.uf.controls['name']) // this is null
  }

  ngAfterViewInit() {
    console.log('kasdkfj')
    console.log(this.uf);
    console.log(this.uf.controls['name']) // this is null 
            this.uf.controls['name'].disable(); // Exception here
  }

  onSubmit(value: any) {
    console.log(this.uf.controls['name']) // But this is NOT null
            this.uf.controls['name'].disable(); // NO Exception, works perfectly
    console.log(value); 
  }
}

HTML код:

<div class="container">
  <h2>Form Data</h2>

      <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
       <div class="form-group"> 
             <label>Name</label>
              <input type="text" class="form-control" name="name" ngModel> 
        </div><br/>
        <div ngModelGroup="address">
              <div class="form-group"> 
                  <label>City</label>
                    <input type="text" class="form-control" name="city" ngModel> 
              </div><br/>
              <div class="form-group"> 
                  <label>Pin</label>
                    <input type="text" class="form-control" name="pin" ngModel> 
              </div><br/>
              <div class="form-group"> 
                  <label>State</label>
                    <input type="text" class="form-control" name="state" ngModel> 
              </div><br/>

        </div>
       <button type="submit" class="btn btn-primary" >Submit</button>
      </form>
  </div>

Но тот же код, когда я делаю это при любом нажатии кнопки или при отправке, работает без проблем.

Вопрос: Как отключить одно из полей после инициализации формы?

Stackblitz Link

Answer 1

Я не фанат этого, но это "решает" проблему.

ngAfterViewInit() {
    setTimeout(() => {
      console.log(this.uf.controls['name']) // this is null
      this.uf.controls['name'].disable(); // Exception here
    }, 0);
  }

Answer 2

, как вы можете найти в источниках ngModel зарегистрирован в родительской (и других реакциях ngModels) внутри макроса задачи (resolvedPromise.then (...)).эти обработки выполняются, потому что ngModel можно экспортировать как, а изменения через параметры должны изменить внутренние компоненты компонента и затем отразиться обратно на родительский шаблон.

в формах, управляемых шаблоном, просто добавьте атрибут disabled в поле формы, которое вы хотитеотключить при инициализации, как это <input type="text" class="form-control" name="name" ngModel disabled>.не волнуйтесь, он будет «применен» только один раз при создании элемента и не повлияет на будущее поведение.

, если вам не нравится описанный выше метод, Promise.resolve().then(() => this.uf.controls['name'].disable()) внутри ngAfterViewInit также будет работать

Answer 3

Вы можете добавить следующую директиву к элементу ввода и связать ее с переменной в компоненте.

<input type="text" class="form-control" name="name" ngModel [disabled]="nameDisabled">

Answer 4

Вы можете обернуть его внутри setTimeout (), чтобы заставить его, или вы можете использовать NgZone (для грязной проверки )

ngAfterViewInit() {
    setTimeout( () => {
      this.uf.controls['name'].disable();
    })
}

Основная причина этого, я думаю,в том, что вы строите свою форму неправильно.Посмотрите в документах о Reactive Forms .Вы должны создать свои элементы управления / группы в компоненте, а не пытаться получить их и саму форму через @ ViewChild