角度形式的密码值未定义

Posted 2023-02-24

【中文标题】角度形式的密码值未定义

【英文标题】：angular form password value undefined

【发布时间】：2019-10-17 10:25:52

【问题描述】：

我使用相同的模板进行登录，该模板运行良好并对其进行了一些修改，但是当我尝试提交注册表单时，我收到了一条错误消息ERROR TypeError: Cannot read property 'value' of undefined

这是html

<form [formGroup]="signupForm" (ngSubmit)="SignUp(username.value, password.value)">
  <!-- validate username availability -->
  <mat-form-field>
    <input matInput placeholder="Username" type="username" formControlName="username" class="input">
  </mat-form-field>
  <div *ngIf="username.invalid && username.dirty" class="notification is-danger">
    <strong> username.value </strong> is already taken
  </div>
  <div *ngIf="username.valid" class="notification is-success">
    <strong> username.value </strong> is available
  </div>
  <div *ngIf="username.pending" class="notification is-info">
    Hold tight... Checking availability of <strong> username.value </strong>
  </div>
  <mat-form-field>
    <input matInput placeholder="Password" type="password" formControlName="password" minlength="6">
  </mat-form-field>
  <label>Password requires a minimum of 6 characters</label>

  <div class="form-group w-100">
    <button mat-raised-button type="submit" class="w-100">Continue</button>
  </div>
  </div>
</form>

在我的 ts 中

import  Component, OnInit  from '@angular/core';
import  AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument  from '@angular/fire/firestore';
import  AuthService  from "../../../core/services/auth.service";
import  FormGroup, FormBuilder, Validators, AbstractControl  from '@angular/forms';
import  map, take, debounceTime  from 'rxjs/operators';

@Component(
  selector: 'app-sign-in',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
)
export class SignUpComponent implements OnInit 

  signupForm: FormGroup;

  regEmail: any;
  emailValid: boolean;
  errorCode: any;
  loading: boolean; // Turn spinner on and off
  constructor( 
    public authService: AuthService,
    public afs: AngularFirestore,
    private fb: FormBuilder)  

  ngOnInit() 
    this.signupForm = this.fb.group(
      email:  ['', [
        Validators.required, 
        Validators.email
      ]],
      username:  ['', 
        Validators.required,
        CustomValidator.username(this.afs) 
      ],
      password: ['',
        Validators.required
      ]
    );
  
  emailValidate(email) 
    this.loading = true;
    return this.authService.afAuth.auth.fetchSignInMethodsForEmail(email)
    .then((signInMethods)=> 
       var isEmailAvailable=!signInMethods.includes('password');
          if (isEmailAvailable)
            this.errorCode = false;
            this.regEmail = email;
            
             else
           this.errorCode = true;
           this.loading = false;
          
    );
  
  // Use getters for cleaner HTML code
  get email() 
    return this.signupForm.get('email')
  

  get username() 
    return this.signupForm.get('username')
  
  SignUp(username, password) 
    this.authService.SignUp(username, this.regEmail, password);
  

export class CustomValidator 
  static username(afs: AngularFirestore) 
    return (control: AbstractControl) => 

      const username = control.value.toLowerCase();

      return afs.collection('users', ref => ref.where('username', '==', username) )

        .valueChanges().pipe(
          debounceTime(500),
          take(1),
          map(arr => arr.length ?  usernameAvailable: false  : null ),
        )
    
  

这是我的 auth.ts 注册功能，它链接到上面的注册功能

SignUp(username, email, password) 
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => 
        // set account  doc    
        let created_data = JSON.parse(JSON.stringify(result.user));
        console.log(created_data);
        const account = 
          uid: result.user.uid,
          email: result.user.email,
          display_name: username,
          email_verified: false
        
        this.SendVerificationMail();
        this.SetUserData(account);
        this.SetPrivateUser(account);
      ).catch((error) => 
        window.alert(error.message)
      )
  

阻止读取我的注册表单的密码值的原因是什么？

编辑：已更新以放置在整个注册 ts 中

【问题讨论】：

验证器代码中的值是否为 null const username = control.value.toLowerCase(); ？

您不需要像这样传递值 - SignUp(username.value, password.value)" 而是可以使用 this.formName.value 在控制器中获取它

您是如何定义username 和password 变量的？因为signUpForm 是在ngOnInit 中分配的，所以我想知道username 和password 是否在实际表单构建之前被预先分配。如果您可以共享整个组件类，尤其是构造函数和变量声明，将会有所帮助

如果您第一次输入密码，而没有触摸用户名字段，是否会开始在用户名上发生错误？

@gerryc.inc 我已经更新了代码以及完整的 ts

【参考方案1】：

发现我刚刚错过了一个获取密码的函数，这就是控制台返回未定义的原因。

我需要补充的是

get password() 
    return this.signupForm.get('password')