Блог

Главная - Вопросы по программированию - не работает в реактивной форме в приложении angular 8

не работает в реактивной форме в приложении angular 8

#angular #angular-material #angular8 #angular-reactive-forms #angular-formbuilder

#angular #angular-материал #angular8 #angular-reactive-forms #angular-formbuilder

Вопрос:

Я использую реактивный подход для создания формы, используя angular и material. Каким-то образом одна из ошибок, сгенерированных с помощью пользовательского средства проверки, не отображается, в то время как все остальные ошибки работают нормально. Ниже приведен код.

 <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" formGroupName="passwords">
    <!--original password-->
    <mat-form-field hintLabel="Should be at least 8 characters long">
        <input type="password" matInput placeholder="Your password" formControlName="password">
        <mat-error *ngIf="signUpForm.get('passwords.password').hasError('required')">
            Passwords cannot be blank
        </mat-error>
        <mat-error *ngIf="signUpForm.get('passwords.password').hasError('minlength')">
            Password has to be atleast 8 characters
        </mat-error>
    </mat-form-field>
    <!--confirmation password-->
    <mat-form-field hintLabel="Should be at least 8 characters long">
        <input type="password" matInput placeholder="Confirm password" formControlName="confirmPassword">
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('required')">
                Passwords cannot be blank
            </mat-error>
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('minlength')">
                 Password has to be atleast 8 characters
            </mat-error>  
            <mat-error *ngIf="signUpForm.get('passwords').hasError('paswordMismatch')">
                Passwords do not match
           </mat-error>
    </mat-form-field>   
</div>

Здесь <mat-ошибка *ngIf=»signUpForm.get(‘passwords’).hasError(‘passwordmismatch’)»> не работает.

ниже приведен файл ts

     ngOnInit(): void{
    
        this.signUpForm = this.formBuilder.group({
            studentName: this.formBuilder.group({
                firstName: [null, [Validators.required, Validators.pattern('[a-zA-Z]*')]],
                middleName: [null, [Validators.pattern('[a-zA-Z]*')]],
                lastName: [null, [Validators.pattern('[a-zA-Z]*')]] }),
            email: [null, [Validators.required, Validators.email,
                  CustomEmailValidator.forbiddenEmailIds]],
            userMobNumber: [null, [Validators.required, Validators.minLength(10), 
                  Validators.maxLength(10)]],
            studentID: [null, [Validators.required]],
            passwords: this.formBuilder.group({
                password: [null, [Validators.required, Validators.minLength(8)]],
                confirmPassword: [null, [Validators.required, Validators.minLength(8)]]
            }, {validator: this.passwordConfirming}),
            enroledProgram: [null, [Validators.required]],
            studentDepartment: [null, [Validators.required]],
            facultyDepartment: [null, [Validators.required]],
            facultyEmail: [null, [Validators.required, Validators.email]],
            facultyName: [null, [Validators.required]],
            funded: [null, [Validators.required]]
            });}
        
          passwordConfirming(c: AbstractControl): { [s: string]: boolean } { 
               console.log(c);
              if (c.get('password').value !== c.get('confirmPassword').value) {
                 return {paswordMismatch: true};
              }
          return null;
        }
    ```

Комментарии:

1. разве это не должно быть {validator**s**: **[**this.passwordConfirming**]**} ?

2. Я думаю, что для одного валидатора не нужно передавать массив

3. одна из возможных вещей, которые я имею в виду, это то, что ошибки mat скрыты, если элемент управления в той же группе форм не затронут. не могли бы вы, пожалуйста, проверить это? просто создайте условие ошибки и сфокусируйтесь на втором входе

4. проблема не в пользовательской проверке. Это происходит потому confirmPassword , что есть valid , и это является причиной для скрытия любых ошибок, связанных с этим вводом. angular считает paswordMismatch , что ошибка связана со confirmPassword всеми ошибками и скрывает их. пользовательский сопоставитель состояния ошибки может сделать свое дело, или вы можете просто пометить confirmPassword поле как invalid , когда его родительская FormGroup также invalid

5. добро пожаловать

Ответ №1:

Это должно быть

 <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center" formGroupName="passwords">
... 
            <mat-error *ngIf="signUpForm.get('passwords.confirmPassword').hasError('paswordMismatch')">
                Passwords do not match
           </mat-error>
    </mat-form-field>   
</div>

Комментарии:

1. Проверка выполняется для группы с именем passwords,

Ответ №2:

Создайте другой файл с именем «password.validator.ts» и напишите следующий код:

 import { AbstractControl, ValidatorFn } from "@angular/forms";

export function passwordValidator(
  control: AbstractControl
): {
  [key: string]: boolean;
} | null {


  const password = control.get("password");
  const confirmPassword = control.get("confirmPassword");
  if (password.pristine || confirmPassword.pristine) {
    return null;
  }
  return password amp;amp; confirmPassword amp;amp; password.value !== confirmPassword.value
    ? { missMatch: true }
    : null;
}

** в файле, где существует форма: добавьте средство проверки пароля следующим образом— **

 import { passwordValidator } from "./password.validator";

this.signUpForm = this.formBuilder.group({
            passwords: this.formBuilder.group({
                password: [null, [Validators.required, Validators.minLength(8)]],
                confirmPassword: [null, [Validators.required, Validators.minLength(8)]]
            }, { validators: [passwordValidator]})}