मुझे यह पता लगाने में परेशानी हो रही है कि छुआ के रूप में सभी फॉर्म के फ़ील्ड को कैसे चिह्नित किया जाए। मुख्य समस्या यह है कि अगर मैं फ़ील्ड्स को नहीं छूता हूं और फॉर्म नहीं जमा करने का प्रयास करता हूं - तो दिखाया नहीं गया है। मेरे पास मेरे नियंत्रक में उस टुकड़े का प्लेसहोल्डर है।
मेरा विचार सरल है:
- उपयोगकर्ता क्लिक बटन सबमिट करें
- छुआ के रूप में सभी क्षेत्रों के निशान
- त्रुटि फॉर्मूला पुनर्मिलन और सत्यापन त्रुटियों को प्रदर्शित करता है
यदि किसी के पास नई पद्धति लागू किए बिना सबमिट करने में त्रुटि दिखाने का कोई अन्य विचार है - तो कृपया उन्हें साझा करें। धन्यवाद!
मेरा सरलीकृत रूप:
<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<input type="text" id="title" class="form-control" formControlName="title">
<span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span>
<button>Submit</button>
</form>
और मेरे नियंत्रक:
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
@Component({
selector : 'pastebin-root',
templateUrl: './app.component.html',
styleUrls : ['./app.component.css']
})
export class AppComponent implements OnInit {
form: FormGroup;
formErrors = {
'title': ''
};
validationMessages = {
'title': {
'required': 'Title is required.'
}
};
constructor(private fb: FormBuilder) {
}
ngOnInit(): void {
this.buildForm();
}
onSubmit(form: any): void {
// somehow touch all elements so onValueChanged will generate correct error messages
this.onValueChanged();
if (this.form.valid) {
console.log(form);
}
}
buildForm(): void {
this.form = this.fb.group({
'title': ['', Validators.required]
});
this.form.valueChanges
.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
if (!this.form) {
return;
}
const form = this.form;
for (const field in this.formErrors) {
if (!this.formErrors.hasOwnProperty(field)) {
continue;
}
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.touched && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
if (!control.errors.hasOwnProperty(key)) {
continue;
}
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
}
(<any>Object).values(formGroup.controls)के लिएObject.keys(formGroup.controls).map(x => formGroup.controls[x])(से stackoverflow.com/questions/42830257/... )