Angular6 - FormControlName - TypeError: Невозможно прочитать свойство 'get' из неопределенного

Question

У меня есть loginForm в моем проекте Stackblitz

Но я получаю сообщение об ошибке в 'formControlName':

ОШИБКА TypeError: Невозможно прочитать свойство 'get'неопределенного в Object.eval [as updateDirectives] (LoginComponent.html: 7) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 23910) в checkAndUpdateView (core.js: 23306) в callViewAction (core.js: 23547)в execComponentViewsAction (core.js: 23489) в checkAndUpdateView (core.js: 23312) в callViewAction (core.js: 23547) в execEmbeddedViewsAction (core.js: 23510) в checkAndUpdateView (core.js: cores (23307) при вызове.js: 23547)

Мой компонент входа в систему:

  initForm() {
    this.loginForm = this.fb.group({
    email: ['', Validators.required ],
    password: ['', Validators.required]     
   });
    }

Я не понимаю, где появляется ошибка.

мой компонент поля ввода Stackblitz

 value:string;
 onChange: ()=> void;
 onTouched: ()=> void;
 disabled:boolean;
  ngOnInit() {
   }
  writeValue(value: string): void {
  this.value = value ? value: '';  
   }
  registerOnChange(fn: any): void {
   this.onChange =fn;
   }
   registerOnTouched(fn: any): void {
   this.onTouched=fn;
   }
   setDisabledState?(isDisabled: boolean): void {
   this.disabled = isDisabled;
   } 

Чего мне не хватает?

Answer 1

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

<div class="alert alert-danger" *ngIf="email.dirty">

А затем верните элемент управления, чтобы получить правильный доступ. Выглядит так.

import { AbstractControl } from '@angular/forms'; //correct type to return.


public get email(): AbstractControl
{
    return this.loginForm.controls.email
}

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

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

if (this.email.valid)
{
    // any logic where you require a specific form control to be valid.
}

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

Answer 2

ссылается на ваш код в stackblitz

Это ваша форма

this.loginForm = this.fb.group({
      email: ['', Validators.required ],
      password: ['', Validators.required]     
    });

и в HTML вы пропустили имя формы

<div class="form-group">
        <app-input-field formControlName="email"></app-input-field>
        <div class="alert alert-danger" *ngIf="loginForm.get('email').dirty && personalProfileForm.get('email').hasError('required')">
          email Required
        </div>
        <app-input-field formControlName="password"></app-input-field>
        <div class="alert alert-danger" *ngIf="loginForm.get('password').dirty && personalProfileForm.get('password').hasError('required')">
          password Required
        </div>
      </div>

Просто замените personalProfileForm на loginForm в вашем html

Кроме того, совет @ dince12 идеально подходит для того, чтобы ваш HTML-код выглядел болеелегко читается, ура!

Если вы хотите получить более подробную информацию об этом примере, вы можете обратиться к статье ниже: http://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example и ниже приведен небольшой пример:

createпубличная собственность вот так

public get myform() { return this.myform.controls; }

и используйте её вот так

<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && myform.firstName.errors }" />
                            <div *ngIf="submitted && myform.firstName.errors" class="invalid-feedback">
                                <div *ngIf="myform.firstName.errors.required">First Name is required</div>
</div>