ionic3 confirm password authentication

The project I'm working on was completed by a former colleague who didn't work for a long time. He doesn't seem to have a sense of reuse. It's really painful for me to clean up some leftover problems and change products online and offline. Because my colleagues find it troublesome, I registered with the ionic version. I didn't do it at all, I'm directly directed to the computer version. This time I want to package the app, and it's my turn to register.

I haven't been in contact with ionic for a long time. This time I want to do a registration function. I don't know much about the form and validation of ionic3. I have to start looking for examples from the form layout one by one. After a few hours of tossing, the interface is completed.

The verification part is also stumbling. The user name, email, and password are done with the built-in Validators. When it comes to verifying the duplicate password, there is a problem with the built-in one. After searching on the Internet, there are tutorials, which are extended custom instructions. Take a look , it seems a bit long, no wonder my colleagues say trouble

In fact, I don’t want to bother myself. It’s a good programmer to be lazy in the right place. After thinking about it, this repeated password verification will only be used once. In the future, the password will be changed at most once more, plus the current time. It's not very loose, just use other simple methods to solve it yourself

After thinking and debugging, I got a result that seems to be okay, the process is omitted, and I will go directly to the code.

ts file

First import FormBuilder, Validators, FormGroup

import {FormBuilder,Validators,FormGroup} from "@angular/forms";

write in class

    RegisterForm: FormGroup;
    name: any;
    email:any;
    password: any;
    repassword:any;
    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
        this.RegisterForm = formBuilder.group({
            name: ['', Validators.compose([Validators.required])],
            email:['',Validators.compose([Validators.required,Validators.email])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
            repassword:['',Validators.compose([Validators.required,Validators.minLength(6)])]
        })
        this.name = this.RegisterForm.controls['name'];
        this.email=this.RegisterForm.controls['email'];
        this.password = this.RegisterForm.controls['password'];
        this.repassword=this.RegisterForm.controls['repassword']
    }

I think my naming is relatively clear, so there should be no need to write comments

corresponding html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>注册</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <form [formGroup]="RegisterForm" (ngSubmit)="Register(RegisterForm.value)" novalidate>
        <ion-input type="text" placeholder="用户名" value="" [formControl]="name" clearInput=true maxlength="15"></ion-input>
        <div *ngIf="name.hasError('required') && name.touched"   class="error-message" color="danger">请输入用户名</div>
        <ion-input type="text" placeholder="邮箱" value="" [formControl]="email" clearInput=true maxlength="60"></ion-input>
        <div *ngIf="email.hasError('required') && email.touched" class="error-message" color="danger">请输入邮箱</div>
        <div *ngIf="!email.hasError('required')&&email.hasError('email') && email.touched" class="error-message" color="danger">邮箱格式不正确</div>
        <ion-input type="password" placeholder="密码" value="" [formControl]="password" clearInput=true></ion-input>
        <div *ngIf="password.hasError('required') && password.touched"  color="danger" class="error-message">请输入密码</div>
        <div *ngIf="(password.hasError('minlength')) && password.touched"  color="danger" class="error-message">密码长度最少为六位</div>
        <ion-input type="password" placeholder="确认密码" value="" [formControl]="repassword" clearInput=true></ion-input>
        <div *ngIf="repassword.hasError('required') && repassword.touched" color="danger" class="error-message">请输入确认密码</div>
        <div *ngIf="(repassword.hasError('minlength')) && repassword.touched" color="danger" class="error-message">确认密码长度最少为六位</div>
        <!--密码不一致的判断要在必填和位数判断后面，也就是它们两个都没有错误时，再去判断密码是否一样-->
        <div *ngIf="!repassword.hasError('required')&&!repassword.hasError('minlength')&&password.value!=repassword.value" color="danger" class="error-message">两次输入的密码不一致</div>
        <!--注册按钮原本只有!RegisterForm.valid，但由于密码不一致不是自带的，还要在这里单独加判断-->
        <button ion-button block color="danger" type="submit" [disabled]="!RegisterForm.valid||(password.value!=repassword.value)">确认注册</button>
    </form>
</ion-content>

After testing, it seems to be no problem. The problem is solved, and it is much simpler to write than custom instructions. Only verification is involved here, and submissions are not written.