Проверка формы Angular6

Вот как я смог решить эту проблему, если это может кому-то помочь.

    <div class = "form-group">
      <label>Password</label>
      <input type = "password"
            class = "form-control"
            name = "password"
            required  minlength = "6"
            [(ngModel)] = "register.password"
            #registerPassword = "ngModel">
      <span class = "help-block danger" *ngIf = "registerPassword.errors?.required && registerPassword.touched">
        The password is required
      </span>

 <span *ngIf = "registerPassword.errors?.minlength  && registerPassword.touched">
        Password must be at least 6 characters or longer.
      </span>

    </div>



  <div class = "form-group">
      <label>Confirm Password</label>
      <input type = "password"
            class = "form-control"
            name = "repassword"
            required  minlength = "6"  pattern = {{register.password}}
            [(ngModel)] = "register.repassword"
            #registerRePassword = "ngModel">
      <span class = "help-block danger" *ngIf = "registerRePassword.errors?.required && registerRePassword.touched">
        Confirm password is required
      </span>

 <span *ngIf = "registerRePassword.errors?.minlength  && registerRePassword.touched">
        Password must be at least 6 characters or longer.
      </span>

  <span *ngIf = "registerRePassword.errors?.pattern  && registerRePassword.touched">
        Passwords must match.
</span>

    </div>



   <div class = "form-group">
      <label>Email</label>
      <input type = "email"
            class = "form-control"
            name = "email"
            required  pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
            [(ngModel)] = "register.email"
            #registerEmail = "ngModel" email>
      <span class = "help-block danger" *ngIf = "registerEmail.errors?.required && registerEmail.touched">
        Email is required
      </span>


<span *ngIf = "registerEmail.errors?.pattern  && registerEmail.touched">
       Valid Email is required
      </span>

    </div>

Я попытался реализовать заявленные вами требования, ниже ссылка:

https://stackblitz.com/edit/angular-formvalidation-wins999-z1sxcw

Я использовал встроенные валидаторы для минимальной длины и для проверки электронной почты.

И настраиваемый валидатор для пароля и подтверждения совпадения пароля.

Эти ссылки полезны:

https://angular.io/guide/forms-overview

https://material.angular.io/

Я надеюсь, что это помогает

Попробуйте использовать реактивные формы в angular, на мой взгляд, он более читабельный и гибкий. Можно начать с здесь. Ваша форма будет выглядеть так:

<div [formGroup] = "myForm" #form>
      <label>Username</label>
      <input formControlName = "username" type = "text">
      <label>Password</label>
      <input formControlName = "password" type = "password">
      <label>Confirm Password</label>
      <input formControlName = "confirmPassword" type = "password">
      <label>Email</label>
      <input formControlName = "email" type = "text">
      <button (click) = "submit()" [disabled] = "form.invalid">Submit</button>
    </div>

Затем создайте свою форму в файле .ts, используя FormBuilder следующим образом:

myForm: FormGroup;
constructor(private builder: FormBuilder) {
  this.myForm = builder.group( {
    username: [null, Validators.required],
    password: [null, [Validators.required, Validators.minLength(6)]],
    confirmPassword: [null, Validators.required],
    email: [null, [Validators.required, Validators.email]]
    }, {validator: PasswordValidator.matchPassword});
   }

Для проверки длины, адреса электронной почты и прочего можно использовать встроенные валидаторы, но для сопоставления пароля вам следует написать еще код. Я написал это в отдельном файле PasswordValidator.ts. Это выглядит как:

export class PasswordValidator {
  static matchPassword(control: AbstractControl) {
    const password = control.get('password').value;
    const confirmPassword = control.get('confirmPassword').value;
    if (password !== confirmPassword) {
      control.get('confirmPassword').setErrors({matchPasswords: true});
    }
    return null;
  }
}

Пожалуйста, проверьте следующее.

HTML.

          <mat-form-field class = "full-width-input">
              <input matInput type = "password" formControlName = "newpassword" placeholder = "Enter new password"
                [type] = "hide1 ? 'password' : 'text'" required minlength = "4" maxlength = "25"
                text = "test" #newpassword>
              <mat-icon matSuffix class = "pointer-style" (click) = "hide1 = !hide1" >
                {{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
                <mat-error *ngIf = "form.controls['newpassword'].hasError('required')">
                   New Password is <strong>required</strong>
                  </mat-error>
              <mat-error *ngIf = "form.controls['newpassword'].hasError('minlength')">
                Your password must be at least <strong>4 characters. </strong>
            </mat-error>
            </mat-form-field>


            <mat-form-field class = "full-width-input">

                <input matInput type = "password" placeholder = "Confirm password" formControlName = "conformpassword" [errorStateMatcher] = "matcher"
                  [type] = "hide2 ? 'password' : 'text'" text = "test" #conformpassword>
                <mat-icon matSuffix class = "pointer-style" (click) = "hide2 = !hide2">
                  {{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
                  <mat-error *ngIf = "form.hasError('notSame')">
                      Passwords does not match
                  </mat-error>

              </mat-form-field>
          <div class = "full-width-input">

          </div>
          <button  style = "margin-left: 75px;" mat-raised-button [disabled] = "!form.valid" color = "primary">SUBMIT</button>
        </form>

в компоненте:

1. import {ErrorStateMatcher } from '@angular/material';

   export class MyErrorStateMatcher implements ErrorStateMatcher {
   
     isErrorState(control: FormControl | null, form: FormGroupDirective
   | NgForm | null): boolean {
   
       const invalidCtrl = !!(control && control.invalid && control.parent.dirty);
       const invalidParent = !!(control && control.parent && control.parent.invalid && control.parent.dirty);
   
       return (invalidCtrl || invalidParent);   } } @Component({   selector: 'app-changepassword',   templateUrl:
   './changepassword.component.html',   styleUrls:
   ['./changepassword.component.scss'] }) export class
   ChangepasswordComponent implements OnInit {   form: FormGroup;  
   error = '';   formSubmitAttempt: boolean;   oldPassword:
   FormControl;   newpassword: FormControl;   conformpassword:
   FormControl;   hide: boolean;   hide1: boolean;   hide2: boolean;  
   matcher = new MyErrorStateMatcher();
   
   constructor(private fb: FormBuilder) {
   
   
           this.form = this.fb.group({
             oldPassword:  ['', Validators.compose([Validators.required, Validators.minLength(4),
   Validators.maxLength(25)])],
             newpassword:  ['', Validators.compose([Validators.required, Validators.minLength(4),
   Validators.maxLength(25)])],
             conformpassword:  ['']
   
           }, {validator: this.checkPasswords });
           dialogRef.disableClose = true;
       }
   
       checkPasswords(group: FormGroup) { // here we have the 'passwords' group
       let pass = group.controls.newpassword.value;
       let confirmPass = group.controls.conformpassword.value;
   
   
       return pass === confirmPass ? null : { notSame: true }   }
   
   
     ngOnInit() {
       this.hide = true;
       this.hide1 = true;
       this.hide2 = true;   }
   
   }