angular - לא נתפס (בהבטחה): TypeError: לא ניתן לקרוא את המאפיין 'registerControl' של null

אני רוצה לאמת סיסמה חדשה ואימות סיסמה באמצעות Angular 4. אני חדש ב-Angular. ניסיתי שיטות שונות אבל אני מקבל את השגיאה הזו בכל פעם. בבקשה הדריכו אותי. בבקשה עזרו לי להבין איפה אני טועה. עזרו לי לפתור את השגיאה הזו כדי שהקוד שלי יעבוד.

סיסמה.ts

    import { Component, Injectable } from '@angular/core';
    import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
    import { Http, Headers } from '@angular/http';
    import 'rxjs/add/operator/map';
    import { RequestOptions } from '@angular/http';
    import 'rxjs/operator/delay';
    import 'rxjs/operator/mergeMap';
    import 'rxjs/operator/switchMap';
    import { NgForm } from '@angular/forms';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

    @IonicPage()
    @Component({
        selector: 'page-password',
        templateUrl: 'password.html',
    })
    export class PasswordPage {

        constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public popoverCtrl: PopoverController) {
        }

        ionViewDidLoad() {
            console.log('ionViewDidLoad PasswordPage');
        }

        public Credentials: FormGroup;

        ngOnInit() {
            this.Credentials = new FormGroup({});
            this.Credentials.addControl('Password', new FormControl('', [Validators.required]));
            this.Credentials.addControl('Confirmation', new FormControl('', [Validators.compose([Validators.required, this.validateAreEqual.bind(this)])]));
        }

        private validateAreEqual(fieldControl: FormControl) {
            return fieldControl.value === this.Credentials.get("Password").value ? null : { NotEqual: true };
        }

סיסמה.html

    <ion-content padding>
      <div class="loginContainer">
        <div class="centerLogo">
          <h1>
            <a href="#">
              <img src="images/logomaster.jpg" alt="" />
            </a>
          </h1>
        </div>
        <form #fm="ngForm" (ngSubmit)="test(fm)" novalidate>
          <ul id="tabs">

            <li (click)="showemail=false">
              <a id="tab2">Set your PIN</a>
            </li>

          </ul>
          <div class="form-group row" formGroupName="passwords" id="tab2C">
            <div class="form-group">
              <ion-item>
                <ion-input type="password" class="form-control" formControlName="password" title="Please enter your password"></ion-input>
              </ion-item>
            </div>
            <div class="form-group">
              <ion-item>
                <ion-input type="password" class="form-control" formControlName="confirmedPassword" title="Please re-enter your password"></ion-input>
              </ion-item>
            </div>
            <div class="btnRow">
              <input class="loginBtn" type="submit" id="phoneBtn" value="Continue" />
            </div>
          </div>
        </form>
      </div>
    </ion-content>

תשובה #1

יש לך כמה בעיות בתבנית שלך, לפני הכל לא סימנת את קבוצת הטופס שלך בתבנית, ולאחר מכן אתה מגדיר formGroupName בשם passwords, שאינו קיים בטופס שלך.

לפיכך הטופס שלך צריך להיראות משהו כזה:

<form (ngSubmit)="test(fm)" [formGroup]="Credentials">
  <ul id="tabs">
    <li (click)="showemail=false">
      <a id="tab2">Set your PIN</a>
    </li>
  </ul>
  <div class="form-group row" id="tab2C">
    <div class="form-group">
      <ion-item>
        <ion-input type="password"formControlName="Password"></ion-input>
      </ion-item>
    </div>
    <div class="form-group">
      <ion-item>
        <ion-input type="password"formControlName="Confirmation"></ion-input>
      </ion-item>
      <ion-item *ngIf="Credentials.hasError('NotEqual', 'Confirmation')">
        NOT SAME
      </ion-item>
    </div>
    <div class="btnRow">
      <input class="loginBtn" type="submit" id="phoneBtn" value="Continue" />
    </div>
  </div>
</form>

הדגמה

עם זאת, אני רוצה להצביע על כך שמסר האימות הזה לא יוצג אם תתחיל לערוך את שדה Password, לאחר שהשווה אותו עם שדה האישור. כדי שזה יעבוד בשני הכיוונים, אני מציע מאמת מותאם אישית: https://stackoverflow.com/a/43493648/6294072