Подтверждение пароля Реактивные формы Angular 4

У меня проблема с моим паролем и подтверждением пароля в моем приложении angular. Я использую реактивные формы, и ошибка говорит: «Предоставленные параметры не соответствуют какой-либо подписи в целевом вызове».

ngOnInit() {
      this.form = this.formBuilder.group({
        name: [null, [Validators.required, Validators.minLength(3)]],
        email: [null, [Validators.required, Validators.email]],
        password: [null, Validators.required],
        confirm_password: [null, Validators.required],
      }, {validator: this.passwordConfirming('password', 'confirm_password')});

}
  passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirm_password').value) {
        return {invalid: true};
    }
  }

HTML

<div class="form-inline">       
    <label class="col-md-4">Password</label>
    <input class="col-md-8" type="password" class="form-control" id="password" formControlName="password">
    <span class="text-muted" *ngIf="!form.controls['password'].valid && form.controls['password']?.touched"> Password is required</span>
 </div>
 <div class="form-inline">       
    <label class="col-md-4">Confirm Password</label>
    <input class="col-md-8" type="password" class="form-control" id="confirm_password" formControlName="confirm_password">

 </div>

angular angular-reactive-forms angular-forms
person Joseph    schedule 04.10.2017    source источник
comment
Вы не закрыли скобку для ngOnInit   -  person Santosh    schedule 04.10.2017

Ответы (1)


arrow_upward
7
arrow_downward

Объявите свой пароль, подтверждающий внешний класс компонента, как функцию, а затем вызовите его, например:

import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit, ViewChild } from '@angular/core';

function passwordConfirming(c: AbstractControl): any {
    if(!c.parent || !c) return;
    const pwd = c.parent.get('password');
    const cpwd = c.parent.get('confirm_password');

    if(!pwd || !cpwd) return ;
    if (pwd.value !== cpwd.value) {
        return { invalid: true };
    }
}

@Component({
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
    form: FormGroup;
    get cpwd() {
        return this.form.get('confirm_password');
    }
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.form = this.formBuilder.group({
            name: [null, [Validators.required, Validators.minLength(3)]],
            email: [null, [Validators.required, Validators.email]],
            password: [null, Validators.required],
            confirm_password: [null, [Validators.required, passwordConfirming]]
        });
    }    
}

HTML-код:

<span *ngIf="cpwd.hasError('invalid')"> Invalid Password </span>
person Atul Chaudhary    schedule 04.10.2017
comment
Всплывающее модальное окно уничтожено - person Joseph; 04.10.2017
comment
что такое всплывающее модальное окно? Я думаю, это будет еще одна ошибка - person Atul Chaudhary; 04.10.2017
comment
Всплывающее модальное окно уничтожено, потому что я реализовал ваши коды - person Joseph; 04.10.2017
comment
я только что вставил код, где я не получаю синтаксической ошибки с моей стороны - person Atul Chaudhary; 04.10.2017
comment
Ошибка типа: невозможно прочитать значение свойства null при подтверждении пароля (user-management.component.ts:8) в form.es5.js:506 в Array.map (‹anonymous›) - person Joseph; 04.10.2017
comment
Еще одна ошибка UserManagementComponent_Host.html:1 ERROR TypeError: Невозможно прочитать свойство get неопределенного при подтверждении пароля (user-management.component.ts:8) в form.es5.js:506 - person Joseph; 04.10.2017
comment
попробуйте еще раз с новым кодом, но ошибка довольно очевидна для решения вашей проблемы. - person Atul Chaudhary; 04.10.2017
comment
Да, я попробовал новый, и ошибка ERROR TypeError: Невозможно прочитать свойство «get» неопределенного при подтверждении пароля (user-management.component.ts: 8) - person Joseph; 04.10.2017
comment
попробуйте еще раз, просто вам нужно убедиться, что элементы управления определены - person Atul Chaudhary; 04.10.2017
comment
Я добавил html. Как бы я сделал это в html? - person Joseph; 04.10.2017
comment
не могу прочитать свойство hasError - person Joseph; 04.10.2017
comment
Ожидаемый валидатор вернет Promise или Observable. - person Hikaru Shindo; 24.05.2018
comment
Невозможно прочитать свойство hasError неопределенного - person Hikaru Shindo; 24.05.2018