我的反应式形式在我进行 Angular 验证之前返回未定义

Question

控制台错误：我收到这个错误是因为表单似乎在我获得值之前请求了数据，并且它正在呈现组件本身，我对这项技术很陌生，请告诉我这是不是方法，或者我应该在哪里查找信息。任何帮助都会很好！

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'value')
TypeError: Cannot read properties of undefined (reading 'value')
at FormGroup.checkPassword (register.component.ts:30:59)
at FormGroup._runValidator (forms.mjs:2261:38)
at FormGroup.updateValueAndValidity (forms.mjs:2238:32)
at new FormGroup (forms.mjs:2641:14)
at FormBuilder.group (forms.mjs:7136:16)
at new RegisterComponent (register.component.ts:14:29)
at NodeInjectorFactory.RegisterComponent_Factory [as factory] (register.component.ts:32:4)

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
register: FormGroup;
constructor(private fb: FormBuilder) { 
this.register = this.fb.group({
usuario: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(4)]],
repeatPassword: ['']
}, { validator: this.checkPassword});

}
ngOnInit(): void {
}
userRegister(){
console.log(this.register)
}
checkPassword(group: FormGroup): any {
const pass = group.controls['password'].value;
const confirmPass = group.controls['confirmPassword'].value;
return console.log(pass,confirmPass);
}
}

<div class="w-full min-h-screen grid place-items-center">
<div class=" min-w-[40vw] min-h-[40vh] bg-gray-100 rounded-md   drop-shadow-2xl text-neutral-900 font-semibold
" >
<form [formGroup]="register" action="" class="flex flex-col justify-evenly items-center w-full min-h-[35vh]" (ngSubmit)="userRegister()">
<h1 class=" text-4xl mb-5">Sign-up</h1>
<div class="flex flex-col items-center  w-full">

<input class="p-3 w-1/2 text-center bg-neutral-200 text-gray-700 rounded-md text-lg drop-shadow" type="text" placeholder="Usuario" formControlName="usuario">
<span  *ngIf="this.register.get('usuario')?.invalid && this.register.get('usuario')?.touched">El usuario requerido</span>
</div>
<div class="flex flex-col items-center   w-full">  
<input class="p-3 w-1/2 text-center bg-neutral-200 text-gray-700 rounded-md text-lg drop-shadow"   type="password" placeholder="Contraseña" formControlName="password">
<span  *ngIf="this.register.get('password')?.invalid && this.register.get('password')?.touched">la contra es  requerido</span>
</div>
<div class="flex flex-col items-center   w-full">  
<input class="p-3 w-1/2 text-center bg-neutral-200 text-gray-700 rounded-md text-lg drop-shadow"   type="password" placeholder="Contraseña" formControlName="repeatPassword">     
</div>
<div class="w-1/2 flex justify-evenly my-3">
<button type="submit" class=" px-5 py-2 text-lg  rounded-sm bg-green-700 text-neutral-300 drop-shadow-xl  hover:scale-105  ease-in-out duration-300" [disabled]="this.register.invalid" [class.invalid]="this.register.invalid">Entrar</button>
<button routerLink="/" class=" px-5 py-2 text-lg rounded-sm bg-red-800 text-neutral-300 drop-shadow-xl  hover:scale-105  ease-in-out duration-300">Volver</button>
</div>
<div class="">
<a routerLink="/register" class="border-b border-black">Crear cuenta</a>
</div>
</form>
</div>
</div>

请帮忙我真的不知道为什么会发生

Answer 1

您可以使用?标记为可选，以避免读取未定义的值。

checkPassword(group: FormGroup): any {
const pass = group.controls['password']?.value;
const confirmPass = group.controls['confirmPassword']?.value;
// return console.log(pass,confirmPass);
console.log(pass,confirmPass);
return [pass, confirmPass];
}