проверка угловых 5 форм:

Question

Я получаю эту ошибку в своей угловой форме 5:

ERROR TypeError: Cannot read property 'invalid' of undefined
    at Object.eval [as updateDirectives] (AccountPage.html:56)

в переменной name.

Я использую FormBuilder, как вы можете видеть ниже.

Кажется, мне нужен геттер или отсутствует декларация?

Контроллер:

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
...
export class AccountPage  implements OnInit {

    accountError: string;
    form: FormGroup;
...



 constructor(
        fb: FormBuilder,
        private navCtrl: NavController,
        private auth: AuthService,
        private afs: FirestoreService,
        private fcmProvider: FcmProvider,
    ) {

        console.log("%c constructor de account", "color: #bada55");
        this.form = fb.group({
            // name: ['', Validators.compose([Validators.required, Validators.minLength(2), ])],
            // firstname: ['', Validators.compose([Validators.required, Validators.minLength(2), ])],
            // add1: ['', Validators.compose([Validators.required, Validators.minLength(6), ])],
            // add2: ['', Validators.compose([])],
            // zip: ['', Validators.compose([Validators.required, Validators.minLength(5), NumberValidator.numeric, ])],
            // city: ['', Validators.compose([Validators.required, Validators.minLength(3), ])],
            // phone: ['', Validators.compose([Validators.required, Validators.minLength(10), ])],
            name: [null, [Validators.required]],
            firstname: [null, [Validators.required]],
            add1: [null, [Validators.required]],
            add2: '',
            zip: [null, [Validators.required]],
            city: [null, [Validators.required]],
            phone: [null, [Validators.required]],
        });

шаблон:

 <div *ngIf="auth.authenticated">
    <form (ngSubmit)="submitForm()" [formGroup]="form">
      <ion-list inset>

        <ion-item>
          <ion-input type="text" placeholder="Nom" formControlName="name"></ion-input>
        </ion-item>

        <div *ngIf="form.name.invalid && (form.name.dirty || form.name.touched)" class="text-danger">
          <div *ngIf="form.name.errors.required">
            Entrez votre nom
          </div>
          <div *ngIf="form.name.errors.minlength">
            2 caractères minimum
          </div>
        </div>

EDIT Это похоже на работу:

    <ion-item>
      <ion-input type="text" placeholder="Nom" name="name" formControlName="name"></ion-input>
    </ion-item>

    <div *ngIf="form.controls['name'].invalid && (form.controls['name'].dirty || form.controls['name'].touched)" class="text-danger">
      <div *ngIf="form.controls['name'].errors.required">
        Entrez votre nom
      </div>
      <div *ngIf="form.controls['name'].errors.minlength">
        2 caractères minimum
      </div>
    </div>

С

this.form = this.formBuilder.group({
        name: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(2), ]) ),
    });

но не могу ли я избежать тяжелого синтаксиса: form.controls['name'] в шаблоне?

Answer 1

если вы console.log(this.form) внутри ngOnInit ловушки жизненного цикла, вы можете видеть, что объект this.form не содержит имени атрибута. Каждый control внутри FormGroup хранится в атрибуте элементов управления объекта. Таким образом, вы должны либо объявить переменную, которая будет указывать на this.form.controls, либо вы можете проверить правильность формы с помощью this.form.controls['name'].valid

Answer 2

Вот ответ:

шаблон:

   <ion-item>
      <ion-input type="text" placeholder="Nom" name="name" formControlName="name"></ion-input>
    </ion-item>

    <div *ngIf="name.invalid && (name.dirty || name.touched)" class="text-danger">
      <div *ngIf="name.errors.required">
        Entrez votre nom
      </div>
      <div *ngIf="name.errors.minlength">
        2 caractères minimum
      </div>
    </div>

Контроллер:

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

export class AccountPage  implements OnInit {

    accountError: string;
    form: FormGroup;
    name: FormControl;
    firstname: FormControl;
    add1: FormControl;
    add2: FormControl;
    zip: FormControl;
    city: FormControl;
    phone: FormControl;

 constructor(
        private formBuilder: FormBuilder,
        private navCtrl: NavController,
        private auth: AuthService,
        private afs: FirestoreService,
        private fcmProvider: FcmProvider,
    ) {
        this.form = this.formBuilder.group({
            name: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(2), ]) ),
            firstname: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(2), ]) ),
            add1: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(6), ]) ),
            add2: '',
            zip: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(5), NumberValidator.numeric, ]) ),
            city: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(3), ]) ),
            phone: new FormControl( null, Validators.compose([Validators.required, Validators.minLength(10), ]) ),
        });

}

Answer 3

Попробуйте проверить действительность вашего шаблона с помощью form.controls ['name']. Invalid