angularJS2 で ReactiveFormModule を使用してフォームを検証したいのですが、このようなコンポーネント コードがあるとします。
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({
'qualification': [this.users.qualification, Validators.required]
});
this.userForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged(); // (re)set validation messages now
}
onValueChanged(data?: any) {
debugger;
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 = {
'designation':''
};
validationMessages = {
'designation': {
'required':'Please select a designation.'
}
};
}
そして、私はこのようなHTMLコードを持っています
<select class="form-control" formControlName="designation" required>
<option selected>Select Designation</option>
<optgroup label="Accounts">
<option>Trainee</option>
<option>Junior Accountant</option>
<option>Senior Accountant</option>
</optgroup>
<optgroup label="Sales">
<option>Sales Executive</option>
<option>Sales Regional Manager</option>
<option>Sales Manager</option>
</optgroup>
<optgroup label="IT">
<option>Junior Software Developer</option>
<option>Senior Software Developerr</option>
<option>Tech Lead</option>
<option>Project Lead</option>
<option>Project Manager</option>
<option>Manager</option>
</optgroup>
</select>
angularJS2で選択ボタンを検証する方法を実際に説明する記事はありません.angularJS2を使用して選択要素を実際に検証できますか?