typescript 将Angular ReactiveForm的用户输入保存在变量中

gdx19jrr  于 2022-11-26  发布在  TypeScript
关注(0)|答案(2)|浏览(141)

我在Angular中有一个带有验证器的ReactiveForm,我试图将用户输入的数据传递给我的 component.ts,并将其保存在一个变量中。
在我的html文件中:

<form [formGroup]="loginForm" (ngSubmit)="submitLogin(emailLogin, passwordLogin)">

和我组件中。ts:

emailLogin: string = "";
passwordLogin: string = "";

submitLogin( emailLogin: string, passwordLogin: string) {
  this.emailLogin = emailLogin;
  this.passwordLogin = passwordLogin;
  console.log(this.passwordLogin);
  console.log(this.emailLogin);
}

我在控制台中得到的所有内容都是空字符串,我不知道为什么
我非常感谢任何帮助!
完整的html格式:

<form [formGroup]="loginForm" (ngSubmit)="submitLogin(emailLogin, passwordLogin)">

  <!-- Email input -->
  <div class="form-outline mb-4">
    <label class="form-label" for="emailLogin">Email-Adresse</label>
    <input formControlName="emailLogin" type="email" id="emailLogin"
           class="form-control form-control-lg"/>
    <ng-container
      *ngIf="loginForm.controls['emailLogin'].dirty || loginForm.controls['emailLogin'].touched">
      <p class="error" *ngIf="loginForm.controls['emailLogin'].errors?.['required']">
        Dieses Feld darf nicht leer sein</p>
      <p class="error" *ngIf="loginForm.controls['emailLogin'].errors?.['email']">
        Es muss eine E-Mail eingegeben werden</p>
    </ng-container>

  </div>

  <!-- Passwort input -->
  <div class="form-outline mb-4">
    <label class="form-label" for="passwordLogin">Passwort</label>
    <input formControlName="passwordLogin" type="password" id="passwordLogin"
           class="form-control form-control-lg"/>
    <ng-container
      *ngIf="loginForm.controls['passwordLogin'].dirty || loginForm.controls['passwordLogin'].touched">
      <p class="error" *ngIf="loginForm.controls['passwordLogin'].errors?.['required']">
        Dieses Feld darf nicht leer sein</p>
      <p class="error" *ngIf="loginForm.controls['passwordLogin'].errors?.['minlength']">
        Das Passwort muss mindestens 8 Zeichen lang sein</p>
    </ng-container>
  </div>

  <!-- Submit button -->
  <button [disabled]="!(loginForm.valid && (loginForm.dirty || loginForm.touched))" type="submit"
          class="btn btn-secondary btn-block mb-4 w-100">Einloggen
  </button>

</form>
0yg35tkg

0yg35tkg1#

submitLogin() {
const formData = this.loginForm.getRawValue();
}
7cjasjjr

7cjasjjr2#

emaillon和passwordLogin是字符串,而不是FormControls。未写入它们的值。请删除这些字段并更改方法:

submitLogin() {
  const emailLogin = this.loginForm.get('emailLogin').value;
  const passwordLogin = this.loginForm.get('passwordLogin').value;
  console.log(passwordLogin);
  console.log(emailLogin);
}

相关问题