在 auth 用户中遇到问题“第一个参数“电子邮件”必须是有效字符串”

Question

我尝试使用 firebase 验证注册表单并验证用户电子邮件和密码

    export class SignupPage {

signupForm :FormGroup;
user_name :AbstractControl;
user_email :AbstractControl;
acc_type: AbstractControl;
user_password:AbstractControl;
pushPage: any;
params: Object;
submitAttempt: boolean = false;
emailRegx: any;
label: any = {}; 


user = {} as User;


constructor(public navCtrl: NavController, public navParams: NavParams 
,public formbuilder:FormBuilder,  public alertCtrl: AlertController, private 
afauth: AngularFireAuth 
) {


  this.signupForm = formbuilder.group({
  user_name: ['', Validators.compose([Validators.maxLength(30), 
  Validators.pattern('[a-zA-Z ]*'), Validators.required])],
  user_email: ['', Validators.required],
  user_password: ['', Validators.compose([Validators.maxLength(40), 
  Validators.required])],
  acc_type: ['', Validators.required]

  });




 }


 ionViewDidLoad() {
  console.log('ionViewDidLoad SignupPage');
 }

showAlert() {
  let alert = this.alertCtrl.create({
  title: 'Great!',
  subTitle: 'We about to Verfiy Your Accout verfiy with 4546!',
  buttons: ['Let\'s verfiy']
});
alert.present();
}

openLoginPage(){

this.navCtrl.push(LoginPage)
}



 creatAccount(){

 this.submitAttempt = true;

 if(!this.signupForm.valid){


 }
 else {
    console.log("success!")
    this.showAlert()

    this.navCtrl.push(EmailverPage)

 }

 }


  async register(user: User){
    try{
      const result = await 
      this.afauth.auth.createUserWithEmailAndPassword(user.user_email , 
      user.user_password)
     console.log(result);
    }

  catch(e) {

  console.error(e)

    }
  }


 }

html代码

         <ion-grid>

        <ion-row>
        <ion-col text-center     col-4 float-end        >
        <p class="pagetitle">Create Account</p>
        </ion-col>
       </ion-row>  

       <ion-row>
       <ion-col col-12 pager> 

            <form  class="signupForm" [formGroup]="signupForm">

              <ion-item class="input1">
                <ion-label floating>
                    <ion-icon name="person"></ion-icon> 

                  Full Name</ion-label>
                <ion-input type="text" [(ngModel)]="user_name" 
           formControlName="user_name" 
          [class.invalid]="!signupForm.controls.user_name.valid && 
           (signupForm.controls.user_name.dirty || submitAttempt)"></ion- 
          input>
              </ion-item>
              <ion-item *ngIf="!signupForm.controls.user_name.valid  && 
             (signupForm.controls.user_name.dirty || submitAttempt)">
                  <p>Please enter a valid name.</p>
              </ion-item>

              <ion-item class="">
                <ion-label floating>
                    <ion-icon name="mail"></ion-icon> 

                  Email</ion-label>
                <ion-input  formControlName="user_email"  
               [(ngModel)]="user_email" pattern=""  type="Email" 
               [class.invalid]="!signupForm.controls.user_email.valid && 
            (signupForm.controls.user_email.dirty || submitAttempt)"></ion- 
           input>

            </ion-item>
            <ion-item *ngIf="!signupForm.controls.user_email.valid  && 
                 (signupForm.controls.user_email.dirty || submitAttempt)">
                <p>Please enter a valid email.</p>
            </ion-item>

            <ion-item> 
              <ion-label floating>
                <ion-icon name="checkbox"> </ion-icon>
                Account type </ion-label>
              <ion-select interface="popover" formControlName="acc_type" 
             name="acc_type"  [(ngModel)]="acc_type" 
             [class.invalid]="!signupForm.controls.acc_type.valid && 
             (signupForm.controls.acc_type.dirty || submitAttempt)">
                <ion-option value="1" selected="true"> Client </ion-option>
                <ion-option value="2"> Company </ion-option>
              </ion-select>
            </ion-item>

            <ion-item *ngIf="!signupForm.controls.acc_type.valid  && 
              (signupForm.controls.acc_type.dirty || submitAttempt)">
                <p>Please Select Your Account Type.</p>
            </ion-item>


            <ion-item>
                <ion-label floating>
                  <ion-icon name="lock"></ion-icon> 
                  Password
                </ion-label>
                <ion-input   type="password" [(ngModel)]="user_password" 
                 name="user_password" formControlName="user_password" 
                [class.invalid]="!signupForm.controls.user_password.valid && 
               (signupForm.controls.user_password.dirty || submitAttempt)"> 
              </ion-input>
              </ion-item>
              <ion-item *ngIf="!signupForm.controls.user_password.valid  && 
             (signupForm.controls.user_password.dirty || submitAttempt)">
                  <p>Please enter a valid email.</p>
              </ion-item>

              <ion-item class="input2">

                <button class="regButton" type="submit" ion-button full 
             round  (click)="register(user)" >Sign Up</button>

              </ion-item>
          </form>
                        </ion-col>
         </ion-row>
        <ion-row>
         <ion-col col-12 float-end      >
          <p style="text-align:center;color: aliceblue;"> Already have an 
        account? <a  (click)="openLoginPage()"> Log in </a></p>

           </ion-col>
          </ion-row>
      </ion-grid>



        </ion-content>

当我尝试时，我会收到以下控制台消息：

代码：“auth/argument-error”，消息：“createUserWithEmailAndPassword 失败：第一个参数“email”必须是有效字符串。

Answer 1

使用signupForm.value 访问表单值。接下来，使用signupForm.value.user_email 获取用户电子邮件。做同样的事情来获取密码值。 其实user.user_email不是字符串。

所有代码：

async register() {
    try {
        if (this.signupForm.valid) {
            const values = this.signupForm.value;
            const result = await this.afauth.auth.createUserWithEmailAndPassword(values.user_email, values.user_password);
            console.log(result);
        }
    } catch(e) {
        console.error('error: ', e);
    }
}

你不需要 User 对象。此外，您的用户对象不包含user_email 和user_password 字段。