Uncaught (약속 있음) : TypeError : null의 'registerControl'속성을 읽을 수 없습니다.

Question

각도 4를 사용하여 새 비밀번호의 유효성을 검사하고 비밀번호를 확인하고 싶습니다. 각도가 새 것입니다. 다른 방법을 시도했지만 매번이 오류가 발생합니다. 나를 안내 해줘. 제발 내가 잘못되고있는 곳에서 도와주세요. 내 코드가 작동하도록이 오류를 해결할 수있게 도와주세요. 당신은 당신의 템플릿에 몇 가지 문제가

<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

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는, 우선 당신은 당신의 템플릿에 formgroup를 표시하지 않은, 다음이 선언된다 양식에 존재하지 않는 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> 

DEMO

당신이 Password 편집을 시작하는 경우 :

양식은해야하므로 다음과 같이 보입니다 입력란을 확인 입력란과 일치시킨 후 이 작업을 양방향으로 수행하려면 사용자 정의 유효성 검사기를 제안하십시오. https://stackoverflow.com/a/43493648/6294072