如何在my Angular 7用户注册中添加密码确认

我正在Angular 7前端和Laravel 5.8后端创建用户注册表单。我已经在后端创建了用户密码确认，但不知道如何在Angular 7前端实现它

我已经创建了角度后端

拉维后端

    public function returnResponse($success, $data, $errorCode = 0, $message = false) {
        $response = array();
        $response['success'] = $success;
        $response['message'] = isset($message) ? $message : '';
        if ($errorCode) {
            $response['errorCode'] = isset($errorCode) ? $errorCode : 0;
        }
        $response['data'] = $data;
        return response()->json($response, 200);
    }

    public function register(Request $request) {
        $validator = Validator::make($request->all(), [
                    'name' => 'required',
                    'email' => 'required|string|email|max:255|unique:users',
                    'password' => 'required|string|min:6|confirmed',
        ]);
        if ($validator->fails()) {
            return $this->returnResponse(false, ['error' => $validator->errors()], 1, 'Invalid User Data');
        }

        $input = $request->all();


        // code for check email exist or not
        if(isset($input['email'])){

            $alreadyExist = User::where(function ($query) use ($input) {
                    $query->where('email', '=', $input['email']);                           
                })->get();
        }

        if (count($alreadyExist->toArray()) > 0) {
            return $this->returnResponse(false, ['error' => 'Email Already Exist'], 1, 'User Data Already Exist');
        }


        // code for register user
        $user = new User();
        $user->name = $input['name'];
        $user->email = $input['email'];
        $user->password = bcrypt($input['password']);
        $user->save();


        $success = array();
        $success['user_id'] = $user->id;
        $success['user']=$user;

        return $this->returnResponse(true, $success, 0, 'User registered successfully');
    }

register.component.ts

 import { Component, OnInit, TemplateRef, Input, ViewChild } from '@angular/core';
    import { first } from 'rxjs/operators';
    import { Router } from '@angular/router';
    import { ToastrService } from 'ngx-toastr';
    import { environment } from 'src/environments/environment';
    import { AuthenticationService } from '../../../../core/auth/services/authentication.service';
    import { NgForm } from '@angular/forms';
    import { from } from 'rxjs';

    declare var $;

   @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.scss']
    })
    export class RegisterComponent implements OnInit {

      config: any;
      registerModel: any = {};
      name: string;

     constructor(
       private authenticationService: AuthenticationService,
       private router: Router,
       private toastr: ToastrService,
     ) { }

      ngOnInit(
       ) {
       this.config = environment;
      }

      onRegister(registerform: any) {

       if (!registerform.valid) { // return false if form not valid
        return false;
      }

      this.authenticationService.register(this.registerModel)
       .pipe(first())
       .subscribe(
         response => {
          if (!response['success']) {
            this.toastr.error(response['message']);
            return false;
          }
          this.toastr.success(response['message']);
          registerform.reset();
          registerform.resetForm();
        this.router.navigate(['login']);
        },
        error => {
          this.toastr.error(error);
        }
       );
      }

      }

register.component.html

<form name="register" #registerform="ngForm" (ngSubmit)="onRegister(registerform);" novalidate>

        <div class="form-group has-feedback">
            <label for="name">Name</label>
          <input type="text" name="name" id="name" class="form-control validate"
          [(ngModel)]="registerModel.name" #name="ngModel" [ngClass]="{'is-invalid' : name.invalid && ((name.dirty || name.touched) || registerform.submitted)}" required  placeholder="Charles Okon" />
          <span class="glyphicon glyphicon-user form-control-feedback"></span>
          <div *ngIf="name.invalid && ((name.dirty || name.touched) || registerform.submitted)" class="invalid-feedback">
            <div *ngIf="name.errors?.required">Full Name is required.</div>
          </div>
        </div>
        <div class="form-group has-feedback">
            <label for="email">Email</label>
          <input type="email" name="email" id="email" class="form-control validate"
          [(ngModel)]="registerModel.email" #email="ngModel" [ngClass]="{'is-invalid' : email.invalid && ((email.dirty || email.touched) || registerform.submitted)}" required  placeholder="example@email.com" />
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
          <div *ngIf="email.invalid && ((email.dirty || email.touched) || registerform.submitted)" class="invalid-feedback">
              <div *ngIf="email.errors?.required">Email is required.</div>
              <div *ngIf="email.errors?.email">Please enter valid email.</div>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" class="form-control" [(ngModel)]="registerModel.password" #password="ngModel" [ngClass]="{ 'is-invalid': password.invalid && ((password.dirty || password.touched) || registerform.submitted)}" required minlength="8" />
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          <div *ngIf="password.invalid && ((password.dirty || password.touched) || registerform.submitted)" class="invalid-feedback">
              <div *ngIf="password.errors.required">Password is required.</div>
              <div *ngIf="password.errors.minlength">Please enter atleast 8 characters.</div>
            </div>
          </div>
      <div  *ngIf="error" class="alert alert-danger" role="alert">
          Erro: {{ error }}
        </div>      
          <div class="form-group">
             <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>          
        </div>
  </form>

名称
全名是必需的。
电子邮件
电子邮件是必需的。
请输入有效的电子邮件。
密码
密码是必需的。
请输入至少8个字符。
错误：{{error}
登记

我想在我的Angular frontend中添加密码确认，以便它在注册前验证密码

this.form = this.fb.group({
  'Password': new FormControl(null),
  'repeatPassword': new FormControl(null)
},{validator: this.passwordConfirming});

为这样的表单添加自定义验证函数，下面是密码确认函数

passwordConfirming(c: AbstractControl): { invalidPassword: boolean } {
  if (c.get('Password').value !== c.get('repeatPassword').value) {
    return {invalidPassword: true};
  }
}

---

对于我来说，比较模板驱动表单中的字段非常有效，如果不在组件中创建自定义验证函数，则必须使用

@rxweb/reactive form validators的
compare
validator

您只需在html中传递

fieldName

属性以及验证程序名称

compare

，如下所示：

   <input type="text" name="confirmPassword" [(ngModel)]="user.confirmPassword"  class="form-control" [compare]="{'fieldName':'password'}"/> 

以下是您是否尝试过本教程的答案。