![](/img/trans.png)
[英]How to validate Select element using ReactiveFormModule in angularJS2?
[英]How to validate Radio Buttons using ReactiveFormsModule in angularJS2?
我是 angularJS2 的新手,我正在尝试使用 ReactiveFormsModule 以 angularJS2 形式学习验证。 现在我被困在如何验证 angularJS2 中的单选按钮上
这是我的组件代码
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { userDetails } from '../app/userDetails'
@Component({
selector: 'user-validation',
templateUrl: '../app/app.template.html'
})
export class userComponent implements OnInit {
constructor(private fb: FormBuilder) { }
userForm: FormGroup;
users = new userDetails();
ngOnInit(): void {
this.buildForm();
}
buildForm(): void {
this.userForm = this.fb.group({
'username': [this.users.username, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24)
]
]
});
this.userForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged(); // (re)set validation messages now
}
onValueChanged(data?: any) {
if (!this.userForm) { return; }
const form = this.userForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
onSubmit() {
this.users = this.userForm.value;
}
formErrors = {
'username': ''
};
validationMessages = {
'username': {
'required': 'Name is required.',
'minlength': 'Name must be at least 4 characters long.',
'maxlength': 'Name cannot be more than 24 characters long.',
'forbiddenName': 'Someone named "Bob" cannot be a hero.'
}
};
}
HTML代码
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-group">
<label>Gender</label>
<label><input type="radio" name="gender" /> Male</label>
<label><input type="radio" name="gender" />Female</label>
<button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button>
</form>
我无法在 angularJS2 中找到任何与单选按钮验证相关的文档,即使在angular.io
根据您的代码,您可以这样使用。
this.userForm = this.fb.group({
'username': [this.users.username, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24)
]],
'gender': [this.users.gender, Validators.required]
});
HTML模板:
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-group">
<label>Gender</label>
<label><input type="radio" formControlName="gender" value="M" /> Male</label>
<label><input type="radio" formControlName="gender" value="F" />Female</label>
<button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button>
</form>
请通过以下链接,它肯定会帮助你。 https://github.com/angular/angular/issues/7282
尝试将以下代码添加到您的组件代码中
this.userForm = this.fb.group({
'username': [this.users.username, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24)
]],
'gender': [this.users.gender, Validators.required]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.