我可以使用以下代码获取表单的值:
<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"
。我不知道什么是反应形式或其他形式。我会在此之后研究,但你可以帮助我吗?谢谢。
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
使用NgModel获取表单中每个标记的数据试试这个:add属性到输入标记[(ngModel)]="password"
Component:
password;
password_com;
this.password_com=this.password;