Uncaught（約束）：TypeError：nullのプロパティ 'registerControl'を読み取ることができません

Question

新しいパスワードを検証し、角度4を使用してパスワードを確認したいと思います。私はさまざまな方法を試しましたが、毎回このエラーが発生しています。私を案内してください。私が間違っているところを助けてください。私のコードが動作するようにこのエラーを解決するのを助けてください。

password.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 }; 
     } 

password.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> 

Answer 1

あなたのテンプレートでいくつかの問題を持っている、あなたはテンプレートであなたのformgroupをマークしていない、とあなたが宣言されているすべての最初のa formGroupNamepasswordsという名前のフォームには存在しません。

フォームは、したがって、このようなものに見える必要があります：私はあなたがPasswordの編集を開始する場合は、この検証メッセージが表示されないこと、しかし指摘したい

<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> 

DEMO

をフィールドを確認フィールドと照合してください。これを両方の方法で行うには、カスタムバリデーターをお勧めします。https://stackoverflow.com/a/43493648/6294072