在angular2中获取表单的所有值 [英] Getting all values of a form in angular2

问题描述

我可以使用以下代码获取表单的值:

I can get the value of a form using the following code:

<input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" #UserName class="form-control" mdbInputDirective>
<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(UserName.value)" mdbWavesEffect>Send
    <i class="fa fa-paper-plane-o ml-1"></i>
</button>

但是我需要获取表单的所有值，以便我可以这样做:

but what I need is to get all values of a form so I can do this:

<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(allFormValues)" mdbWavesEffect>Send
    <i class="fa fa-paper-plane-o ml-1"></i>
</button>

user: User;
ObSubmit(values) {
    user.UserName = values.UserName;
    user.Password = values.Password;
    ......
}

下面是整个代码:

<div class="row">
  <div class="col-md-12 text-left">

    <form [formGroup]="subscriptionForm">
      <h3 style="color: gray; text-align: center;">Registration</h3>

      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
          </div>
          <br>
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="FirstName" id="FirstName" class="form-control" mdbInputDirective>
            <label for="FirstName">Your First name</label>
          </div>
        </div>
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user-secret prefix grey-text"></i>
            <input type="password" id="Password" formControlName="Password" class="form-control" mdbInputDirective>
            <label for="Password">Your password</label>
          </div>
          <br>
          <div class="md-form">
            <i class="fa fa-user-user prefix grey-text"></i>
            <input type="text" id="LastName" formControlName="LastName" class="form-control" mdbInputDirective>
            <label for="LastName">Your Last name</label>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-md-12">
          <div class="md-form">
            <i class="fa fa-envelope prefix grey-text"></i>
            <input type="email" id="Email" formControlName="Email" class="form-control" mdbInputDirective>
            <label for="Email">Your Email</label>
          </div>
          <br>
          {{subscriptionForm.value|json}}
          <br>
          <div class="text-center">
            <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()" mdbWavesEffect>Send
              <i class="fa fa-paper-plane-o ml-1"></i>
            </button>
          </div>
        </div>
      </div>
    </form>

  </div>
</div>

import { User } from './../../shared/user.model';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  subscriptionForm: FormGroup;
  user: User;

  constructor(private fb: FormBuilder) {
    this.subscriptionForm = fb.group({
      UserName: ['', Validators.required],
      Password: ['', Validators.required],
      Email:    ['', Validators.required, Validators.email],
      FirstName: ['', Validators.required],
      LastName: ['', Validators.required]
    });
  }

  ngOnInit() {
  }

  OnSubmit() {
   this.user = this.subscriptionForm.value;
   console.log(this.user);
  }

}

使用#subscriptionForm="ngForm"时出现错误.可能是因为[formGroup]="subscriptionForm".我不知道什么是反应形式或其他形式.此后，我将进行研究，但是您能帮我吗?谢谢.

When I use the #subscriptionForm="ngForm" I get an error. Probably because of the [formGroup]="subscriptionForm". I don't know what a reactive form or other forms. I'll study that after this but can you help me with this? Thank you.

推荐答案

不要将反应性表单"方法与模板驱动"方法混合使用，否则最终会出现很多问题.在一个组件中遵循其中之一.当您遵循反应式"表格时，仅遵循该表格.

Dont mix Reactive form approach with Template Driven approach, otherwise you end up will lot of problem. Follow one of them in one component. As you are following Reactive form follow that only.

这意味着您不能使用#subscriptionForm="ngForm"作为其模板驱动的表单方法.

that means you cannot use #subscriptionForm="ngForm" as its template driven form approach.

我建议您使用反应性表单方法，这样您可以一次获得所有表单值

I suggest you make use of reactive form approach , so you can get all form value in once by doing this

 user = userForm.value ;

但是为此，您需要自己创建板条箱并这样做

but for that you need to crate from by yourself and do like this

<form [formGroup]="userForm">
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

ts文件

 User:user;
 constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    //form control name should match with User class property name
    this.userForm= this.fb.group({
      name: ['', Validators.required ],
      street: '',
      ..other property
    });
  }

  submit() {
   this.user = userForm.value;
   //if property doesnt match then do this 
   this.user.Name = this.userForm.get('name').value;
   ..do for all property 
  }

无法详细解释，请遵循以下步骤: https://angular.io/guide/reactive-表格

Cannot explain in detail , you should follow this : https://angular.io/guide/reactive-forms

这篇关于在angular2中获取表单的所有值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！