Блог

Мы пытаемся создать форму настроек в 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 amp;amp; 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 amp;amp; 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 — нет. Что может вызвать такие проблемы? Что не так в коде?

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

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

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

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

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

 *ngIf="!SettingsForm.controls.lastName.valid amp;amp; SettingsForm.controls.lastName.touched"
  

Теперь, чтобы оно не было неопределенным при запуске — переместите ваш FormBuilder init в функцию конструктора, в отличие от хука жизненного цикла, который вы используете сейчас.