如何从.TS的反应形式访问文件输入字段的值

Question

在简单NgForm我用来传递在该函数的参数#myForm="ngForm"的值，并将其用于工作，但它不存在于反应形式工作。 e.controls.first_name.value和e.controls不取TS文件中的输入字段的值。我想，这样它可以在registerUser方法传递给取这些值。

<form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
              <div id="tab-2" class="log-tab-content">
                <div class="login-form">

                  <div class="login-left">
                    <input type="text" name="first_name" placeholder="First Name *"/>
                    <div class="clearfix"></div>
                    <input type="text" name="email" placeholder="Email *"/>
                    <div class="clearfix"></div>
                    <input type="text" name="password" placeholder="Password *"/>
                    <div class="clearfix"></div>
                  <button type="submit" class="log-button log-button1">Register now</button>
                </div>
              </div>
            </form>

TS文件

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { DataService } from '../services/data.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-x-home',
  templateUrl: './x-home.component.html',
  styleUrls: ['../app.component.css', './x-home.component.css']
})
export class XHomeComponent implements OnInit {

  timezones: Object;
  registerForm: FormGroup;
  submitted = false;

  constructor(private reg: AuthService, private data: DataService, private formBuilder: FormBuilder) { }
  registered: boolean = false;
  ngOnInit() {
    this.data.getTimeZone().subscribe(storeData=> {
      this.timezones = storeData;
    })
    this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required]
    })
  }

  get e() { return this.registerForm.controls; }

  onSubmit(e) {
    const user = {
      first_name: e.controls.first_name.value,
      last_name: e.controls.last_name.value,
      email: e.controls.email.value,
      c_email: e.controls.c_email.value,
      password: e.controls.password.value,
      c_password: e.controls.c_password.value,
      birth_date: e.controls.birth_date.value,
      phone: e.controls.phone.value,
      timezone: e.controls.timezone.value
    };
    console.log(e.controls);
    console.log(e.first_name.value);
    console.log();

    this.reg.registerUser(user).subscribe(
      (res) => {
          this.registered = res ? true : false;
          // console.log(this.registered);      
      },
      (err) => {
          console.log(err); 
      }
   );
  }
}

Answer 1

你错过了在HTML每输入formControlName。你应该添加formControlName每个输入

在ngOnInit添加所有变量形式

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name:['', Validators.required],
      email: ['', Validators.required],
      c_email: ['', Validators.required],
      password:['', Validators.required],
      c_password:['', Validators.required],
      birth_date: ['', Validators.required],
      phone: ['', Validators.required],
      timezone: ['']
    })
}




onSubmit() {
const user = this.registerForm.value;
        }

添加formControlName在你的HTML像下面

 <form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
              <div id="tab-2" class="log-tab-content">
                <div class="login-form">

                  <div class="login-left">
                    <input type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>
                    <div class="clearfix"></div>
                    <input type="text" name="email" formControlName="email" placeholder="Email *"/>
                    <div class="clearfix"></div>
                    <input type="text" formControlName="password" name="password" placeholder="Password *"/>
                    <div class="clearfix"></div>
                  <button type="submit" class="log-button log-button1">Register now</button>
                </div>
              </div>
            </form>