Member 13931287 Ответов: 0

Для выполнения кросс-полевой проверки(подтверждения пароля) с использованием материальных компонентов.

Я создал компонент(set-pass),я хочу выполнить действия пароля и подтверждения пароля в этом компоненте.Я попробовал это сделать, создав пользовательскую директиву(confirm-equal-validator.directive.ts) внутри общей папки.

Ниже приведены мои файлы компонентов

set-pass.component.html

<form >
     <mat-form-field >
       <input matInput name="password" placeholder="New password" [type]="hide ? 'password' : 'text'" [formControl]="passFormControl" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="passFormControl.hasError('required')">
           Please enter your newpassword
         </mat-error>
     </mat-form-field>

     <mat-form-field >
       <input matInput name="confirmPassword"  appConfirmEqualValidator="password"  placeholder="Confirm password" [type]="hide ? 'password' : 'text'" [formControl]="confirmFormControl" #confirmPasswordControl="ngModel" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="confirmFormControl.hasError('required')">
         Confirm your password
         </mat-error>
         <mat-error *ngIf="confirmFormControl.hasError('notEqual')">
           Confirm your password
           </mat-error>
     </mat-form-field>
  </form>


set-pass.component.ts

import {Component, OnInit } from '@angular/core';
    import {FormControl, FormGroupDirective, NgForm, Validators} from 
         '@angular/forms';
    import {ErrorStateMatcher} from '@angular/material/core';

     @Component({
       selector: 'ylb-set-pass',
       templateUrl: './set-pass.component.html',
       styleUrls: ['./set-pass.component.css']
       })
     export class SetPassComponent {

        passFormControl = new FormControl('', [
        Validators.required,
         ]);
           confirmFormControl = new FormControl('', [
          Validators.required,
        ]);
   }


2

Что я уже пробовал:

<pre lang="text">
import { Validator,AbstractControl,NG_VALIDATORS } from '@angular/forms';
    import { Directive,Input} from '@angular/core';



    @Directive({
       selector: '[appConfirmEqualValidator]',
       providers: [{
            provide: NG_VALIDATORS,
            useExisting: ConfirmEqualValidatorDirective ,
            multi:true
        }]
     })

   export class ConfirmEqualValidatorDirective implements Validator{
     @Input() appConfirmEqualValidator:string;
      validate(control: AbstractControl):{[key:string]:any} | null{
        const controlToCompare = 
    control.parent.get(this.appConfirmEqualValidator);
        if(controlToCompare && controlToCompare.value !== control.value){
           return{'notEqual':true};
         }
         return null;
       }
     }


Я импортировал этот компонент в app.module.ts следующим образом

импорт { ConfirmEqualValidatorDirective } из './shared/confirm-equal-validator.directive';

Я правильно следовал всем шагам, приведенным в этом видео

https://www.youtube.com/watch-что?v=YhazkQd59Hk

Я хочу добиться подтверждения пароля только с помощью материальных компонентов, например, я также хочу подтвердить поле пароля.Но я не могу подтвердить пароль, и мне нужен текст ошибки относительно несоответствия пароля.У меня есть много ссылок, но они работают с входными компонентами bootstrap.Я хочу, чтобы он использовал только материалы

0 Ответов