Невозможно прочитать свойство get неопределенного Ionic 3

Question

Мы пытаемся создать форму настроек в ionic 3, но она регулярно выдает разные ошибки. В качестве основной проблемы, он показывает не может прочитать свойство get неопределенного. Мы используем Ionic 3, и вот код для этой страницы:

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

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private fb: FormBuilder,
        private alertCtrl: AlertController,
        private tokenProvider: TokenProvider,
        private usersProvider: UsersProvider
      ) {
        this.tabElement = document.querySelector('.tabbar.show-tabbar');
        this.socket = io('http://localhost:3000');

      }
           ionViewDidLoad() {
                 this.user = this.tokenProvider.GetPayload();
            this.buildSettingsForm();
            if (this.user) {
              this.GetUser(this.user);
            }

            this.socket.on('refreshPage', () => {
              this.GetUser(this.user);
            });
            this.socket.on('refreshPage', () => {
              this.GetUser(this.user);
            });

          }


              GetUser(id) {
                this.usersProvider.GetUserById(id).subscribe(data => {
                  this.user = data.result;

                });
              }
              onSubmit() {
                this.SettingsForm.reset();
              }
              ionViewWillEnter() {
                (this.tabElement as HTMLElement).style.display = 'none';
              }
              ionViewWillLeave() {
                (this.tabElement as HTMLElement).style.display = 'flex';
              }
            ...
              private populateForm() {
                const unusedFields = [
                  '_id',
                  '__v',
                  'username',
                  'email',
                ];

                const userInfo = Object.assign({}, this.user);
                unusedFields.forEach((field) => delete userInfo[field]);
                this.SettingsForm.setValue(userInfo);
              }

              private buildSettingsForm() {
                this.SettingsForm = this.fb.group({
                  city: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
                  country: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
                  firstName: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
                  lastName: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
                });
                this.SettingsForm.setValidators(this.minimumAge(18));
              }

              UpdateUser() {
                this.usersProvider.EditUser(this.SettingsForm.value).subscribe(
                  data => {
                  },
                  err => console.log(err)
                );
            }

            }

Также вот HTML.

<ion-content padding>
  <form [formGroup]="SettingsForm" (ngSubmit)="UpdateUser()">
    <ion-list style="margin-top: 15% !important" class="scroll">
      <ion-item>
          <ion-input class="input-field" formControlName="firstName" name="firstName" type="text" placeholder="First Name"></ion-input>
        </ion-item>
   <div *ngIf="!SettingsForm.get('firstName').valid && SettingsForm.get('firstName').touched"
    class="help-block">Please choose the gender</div>
      <ion-item>
        <ion-input class="input-field" formControlName="lastName" name="last name" type="text" placeholder="Last name"></ion-input>
      </ion-item>
   <div *ngIf="!SettingsForm.get('lastName').valid && SettingsForm.get('lastName').touched"
    class="help-block">Please choose the gender</div>
        <ion-item>
...
...
  <button ion-button block class="login-button">Sign Up</button>                
    </ion-list>
  </form>

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

Answer 1

Ваш код кажется мне немного необычным в том, как вы инициализируете и работаете с формами.По крайней мере, я привык видеть что-то более близкое к тому, что есть в руководстве angular.io или в этом уроке Джоша: https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

Теперь к вашей проблеме - ошибка говорит «получить неопределенное», в основном это означает, что ваша SettingsFormв выражении * ngIf иногда есть ... undefined.

Вместо метода get попробуйте использовать это:

*ngIf="!SettingsForm.controls.lastName.valid && SettingsForm.controls.lastName.touched"

Теперь, чтобы избежать его неопределенности при запуске - переместите инициал formBuilder в конструкторфункционирует в отличие от используемого вами сейчас жизненного цикла.

Answer 2

Форма, которую вы используете в шаблоне, будет неопределенной при запуске. Используйте оператор Элвиса, чтобы избежать нулевого исключения в шаблоне:

<div *ngIf="!SettingsForm?.get('firstName')?.valid && SettingsForm?.get('firstName')?.touched"