Angularでリアクティブフォーム入力の値を取得するにはどうすればよいですか?

掃除

私は、反応性フォーム入力を取得する必要がありemailpassword、電子メールを使ってfirebaseで新規ユーザーを登録するためのサービスメソッドを呼び出す登録し、私の関数に渡します。残念ながら、フォーム送信後のChromeコンソールではRegisterComponent.html:2 ERROR ReferenceError: email is not defined

私のコードは次のようになります。

register.component.ts

export class RegisterComponent {
  form: FormGroup;

  constructor(fb: FormBuilder, private authService: AuthService) {
    this.form = fb.group({
  email:['',Validators.required ],
  password:['',Validators.compose([Validators.required,
    PasswordValidator.cannotContainSpace])]
    })
    email = this.form.controls['email'].value;
    password = this.form.controls['password'].value;
   }


   signInWithEmail() {
     this.authService.regUser(this.email, this.password);
   }
}

私のAuthServiceファイル:

 regUser() {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
console.log(this.form.controls['email'].value);
    }

質問に関連するのは私のコードの一部にすぎません。大きくて散らかっているので、登録フォームは含めていませんので、見る必要はないと思います。前もって感謝します。

編集:

register.component.html

<div class="container">
<form [formGroup]="form" (ngSubmit)="signInWithEmail()">
    <div class="form-group">
       <label for="email">Email</label>
        <input type="email" class="form-control" formControlName="email">
       <div *ngIf="form.controls.email.touched
        && !form.controls.email.valid" class="alert alert-danger">
            Email is required
       </div>
    </div>
    <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" formControlName="password">
    <div *ngIf="form.controls.password.touched && form.controls.password.errors">
        <div *ngIf="form.controls.password.errors.invalidLogin"
class="alert alert-danger">
            Email or password is invalid.
        </div>
        <div *ngIf="form.controls.password.errors.required"
class="alert alert-danger">
            Password is required.
        </div>
        <div *ngIf="form.controls.password.errors.cannotContainSpace"
class="alert alert-danger">
            Password cannot contain space.
        </div>
    </div>
</div>

    <button class="btn btn-primary" type="submit">Register</button>

</form>
</div>

ここに画像の説明を入力してください

ビリージョフ

以下を使用して、リアクティブフォームの値を取得できます。

signInWithEmail() {
     const formValue = this.form.value;
     this.authService.regUser(formValue.email, formValue.password);
}

ところで、私はあなたregUserがこれらの両方のパラメータを取るようにあなたのサービス内であなたのメソッドパラメータを調整するべきだと思います:

あなたのサービス

regUser(email, pass) {
    firebase.auth().createUserWithEmailAndPassword(email, pass)
 .catch(function(error) {
   // Handle Errors here.
   var errorCode = error.code;
   var errorMessage = error.message;
   // ...
 });
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リアクティブフォームの日付入力値を設定するにはどうすればよいですか?

分類Dev

リアクティブフォームでAngularの入力フィールドに触れていない後に非同期バリデーターをトリガーするにはどうすればよいですか?

分類Dev

リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

分類Dev

入力キーでShinyの2つのリアクティブデータフレームを結合するにはどうすればよいですか?

分類Dev

Angular6でリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

分類Dev

リアクティブフォーム角度2の他のformControl値からformControl値を自動的に更新するにはどうすればよいですか?

分類Dev

入力のカスタムディレクティブから、親フォームを無効にするにはどうすればよいですか?

分類Dev

フォームの入力値を取得するにはどうすればよいですか?

分類Dev

事前に入力されたデータをクリアせずにAngularリアクティブフォームをリセットするにはどうすればよいですか?

分類Dev

フォームを送信するときに非表示の入力フィールドの値を取得するにはどうすればよいですか?

分類Dev

元の値を再入力してAngularフォームフィールドを「クリーン」にするにはどうすればよいですか?

分類Dev

入力データ値をangular-2のカスタムディレクティブに送信するにはどうすればよいですか?

分類Dev

特定のリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

分類Dev

Angular6を使用してFormArrayのみを使用してリアクティブフォームを作成するにはどうすればよいですか?

分類Dev

Angularでリカバリリアクティブフォームステートメントを実行するにはどうすればよいですか?

分類Dev

リアクティブフォームを使用してラジオボタンの値を設定するにはどうすればよいですか?

分類Dev

入力エリアの横に送信ボタンがあるアダプティブフォーム(メール入力ボックス)を作成するにはどうすればよいですか?

分類Dev

アプリケーションで現在アクティブなフォームを取得するにはどうすればよいですか?

分類Dev

入力からフォームのアクションに入力値を追加するにはどうすればよいですか?

分類Dev

Angular:コントローラーでフォームの入力値を取得するにはどうすればよいですか?

分類Dev

jquery 1.8で入力のフォームの親を取得するにはどうすればよいですか?

分類Dev

送信時にAngular7リアクティブフォームで検証を適用するにはどうすればよいですか?

分類Dev

Angularの$ resourceを介してカスタムディレクティブから入力値を送信するにはどうすればよいですか?

分類Dev

Angular 7:リアクティブフォームと一緒にファイル/画像を送信するにはどうすればよいですか?

分類Dev

デフォルトのWooCommerceチェックアウトフィールドのように、カスタムチェックアウトフィールドに以前に入力した値を入力するにはどうすればよいですか?

分類Dev

PHPのHTMLフォームからの入力値を処理してMySQLクエリに挿入するにはどうすればよいですか?

分類Dev

AngularJSの入力フィールドをクリアするにはどうすればよいですか?

分類Dev

TextInputDialogの入力フィールドをクリアするにはどうすればよいですか?

分類Dev

JavaScriptでフォームの入力値を設定するにはどうすればよいですか?

Related 関連記事

  1. 1

    リアクティブフォームの日付入力値を設定するにはどうすればよいですか?

  2. 2

    リアクティブフォームでAngularの入力フィールドに触れていない後に非同期バリデーターをトリガーするにはどうすればよいですか?

  3. 3

    リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

  4. 4

    入力キーでShinyの2つのリアクティブデータフレームを結合するにはどうすればよいですか?

  5. 5

    Angular6でリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

  6. 6

    リアクティブフォーム角度2の他のformControl値からformControl値を自動的に更新するにはどうすればよいですか?

  7. 7

    入力のカスタムディレクティブから、親フォームを無効にするにはどうすればよいですか?

  8. 8

    フォームの入力値を取得するにはどうすればよいですか?

  9. 9

    事前に入力されたデータをクリアせずにAngularリアクティブフォームをリセットするにはどうすればよいですか?

  10. 10

    フォームを送信するときに非表示の入力フィールドの値を取得するにはどうすればよいですか?

  11. 11

    元の値を再入力してAngularフォームフィールドを「クリーン」にするにはどうすればよいですか?

  12. 12

    入力データ値をangular-2のカスタムディレクティブに送信するにはどうすればよいですか?

  13. 13

    特定のリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

  14. 14

    Angular6を使用してFormArrayのみを使用してリアクティブフォームを作成するにはどうすればよいですか?

  15. 15

    Angularでリカバリリアクティブフォームステートメントを実行するにはどうすればよいですか?

  16. 16

    リアクティブフォームを使用してラジオボタンの値を設定するにはどうすればよいですか?

  17. 17

    入力エリアの横に送信ボタンがあるアダプティブフォーム(メール入力ボックス)を作成するにはどうすればよいですか?

  18. 18

    アプリケーションで現在アクティブなフォームを取得するにはどうすればよいですか?

  19. 19

    入力からフォームのアクションに入力値を追加するにはどうすればよいですか?

  20. 20

    Angular:コントローラーでフォームの入力値を取得するにはどうすればよいですか?

  21. 21

    jquery 1.8で入力のフォームの親を取得するにはどうすればよいですか?

  22. 22

    送信時にAngular7リアクティブフォームで検証を適用するにはどうすればよいですか?

  23. 23

    Angularの$ resourceを介してカスタムディレクティブから入力値を送信するにはどうすればよいですか?

  24. 24

    Angular 7:リアクティブフォームと一緒にファイル/画像を送信するにはどうすればよいですか?

  25. 25

    デフォルトのWooCommerceチェックアウトフィールドのように、カスタムチェックアウトフィールドに以前に入力した値を入力するにはどうすればよいですか?

  26. 26

    PHPのHTMLフォームからの入力値を処理してMySQLクエリに挿入するにはどうすればよいですか?

  27. 27

    AngularJSの入力フィールドをクリアするにはどうすればよいですか?

  28. 28

    TextInputDialogの入力フィールドをクリアするにはどうすればよいですか?

  29. 29

    JavaScriptでフォームの入力値を設定するにはどうすればよいですか?

ホットタグ

アーカイブ