以angular2获取表单的所有值

问题描述 投票:0回答:2

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

<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>

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

<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"。我不知道什么是反应形式或其他形式。我会在此之后研究,但你可以帮助我吗?谢谢。

html angular
2个回答
3
投票

Working Demo根据您的输入而定。

不要将Reactive form方法与Template Driven方法混合使用,否则最终会出现很多问题。在一个组件中关注其中一个。当您关注Reactive表单时,请遵循该说明。

这意味着你不能使用#subscriptionForm="ngForm"作为模板驱动形式的方法。


我建议你使用反应形式方法,这样你就可以通过这种方式获得所有形式的价值

 user = userForm.value ;

但是为此你需要自己创作并做到这一点

<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-forms


-1
投票

使用NgModel获取表单中每个标记的数据试试这个:add属性到输入标记[(ngModel)]="password"

Component:
password; 
password_com;

this.password_com=this.password;
© www.soinside.com 2019 - 2024. All rights reserved.