时间戳

首页 > 解决方案 > AbstractControl 类型的参数不能分配给字符串类型的参数

angular - AbstractControl 类型的参数不能分配给字符串类型的参数

问题描述

我已经构建了一个表单，我在其中实现了表单验证，当用户将电子邮件或密码字段留空时，它只会显示一条错误消息。它工作得很好，但我的问题是我将电子邮件和密码设置为“AbstractControl”而不是“String”，所以当我尝试使用 Firebase 对它们进行身份验证时，我收到这条错误消息，说“AbstractControl 类型的参数不可分配给参数字符串类型”。我认为问题在于我将电子邮件和密码设置为抽象控制，而不是将其设置为字符串。我怎样才能覆盖它并允许通过验证和身份验证？这是我的代码。

HTML

<ion-content padding>
    <form [formGroup]="formgroup">
        <ion-list>
          <ion-item>
             <ion-label>Email</ion-label>
             <ion-input type="text" formControlName="email" name="email"></ion-input>
          </ion-item>
          <ion-item *ngIf="email.hasError('required') && email.touched">
            <p>*Email is required</p>
          </ion-item>

          <ion-item>
              <ion-label>Password</ion-label>
              <ion-input type="password" name="password" formControlName="password"></ion-input>
           </ion-item>
           <ion-item *ngIf="password.hasError('required') && password.touched">
             <p>*password is required</p>
           </ion-item>
        </ion-list>
      <button clear ion-button (click)="login()">Submit</button>
      </form>
</ion-content>

TS 文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { Validators, FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  email: AbstractControl;
  password: AbstractControl; 
  formgroup: FormGroup;

  constructor(public formbuilder: FormBuilder, public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {

    this.formgroup = formbuilder.group({
      email:['',Validators.required],
      password:['',Validators.required]
    });

    this.email = this.formgroup.controls['email'];
    this.password = this.formgroup.controls['password'];
  }

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

  login(){
   this.aAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(
     e => {console.log(e)}
     )
  }

  goToSignup(){
    this.navCtrl.push(SignupPage)
  }

}

标签： angularionic3

解决方案

好吧，错误消息说明了一切。错误是因为signInWithEmailAndPassword需要strings 但你用AbstractControls 调用了它。

AbstractControl您可以使用其上的value属性获取 a 的值。

login将您的方法更改为：

login() {
  this.aAuth.auth.signInWithEmailAndPassword(this.email.value, this.password.value)
    .then(e => console.log(e))
}

小建议：

不知道为什么要在组件上创建emailandpassword属性，当您可以轻松获取表单的值时，this.formgroup.value您还可以使用解构从表单值中提取emailand password，然后将其传递给signInWithEmailAndPassword方法：

login() {
  const { email, passowrd } = this.formgroup.value;
  this.aAuth.auth.signInWithEmailAndPassword(email, password)
    .then(e => console.log(e))
}

推荐阅读