दिलचस्प पोस्ट
मैं उद्देश्य- C में किसी कतार को कैसे बनाऊं और उपयोग करूँ? कुछ वस्तुओं को निकालने के लिए "भूलता है" लूप लुक PHP के json_encode सभी JSON नियंत्रण वर्णों से नहीं बचता है "स्ट्रीम पहले ही चालू या बंद कर दिया गया" (जावा 8) से बचने के लिए एक स्ट्रीम की प्रतिलिपि बनाएँ छवि टैग के नीचे रहस्य सफेद स्थान हेडर फाइलों में वैरिएबल घोषणा – स्थिर या नहीं? जावा में कर्ल का उपयोग कैसे करें? जावा – Base64 को छवि कनवर्ट करें PHP में गुमनाम वस्तुओं का निर्माण करना रूटर लिंक के साथ कांगारु 2 इकाई परीक्षण घटक एक wpf लिखने योग्य बिटमैप के लिए एक ड्राइंग कॉन्टैक्ट प्राप्त करना जीआईटी में एक ही शाखा को क्लोन कैसे करें? मैं अपने फेसलेट में HTML टिप्पणियों को कैसे निकाल सकता हूं? PHP __get और __set जादू तरीकों कैसे जानने के लिए कि MySQLnd सक्रिय ड्राइवर है?

Angular2 validator जो कई फॉर्म फ़ील्ड्स पर निर्भर करता है

क्या यह एक मान्यकर्ता बनाने के लिए संभव है जो यह तय करने के लिए एकाधिक मान का उपयोग कर सकता है कि मेरा फ़ील्ड मान्य है या नहीं?

उदाहरण के लिए यदि ग्राहक की पसंदीदा संपर्क विधि ईमेल से है तो ईमेल फ़ील्ड की आवश्यकता होनी चाहिए।

धन्यवाद।


उदाहरण कोड के साथ अपडेट किया गया …


import {Component, View} from 'angular2/angular2'; import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; @Component({ selector: 'customer-basic', viewInjector: [FormBuilder] }) @View({ templateUrl: 'app/components/customerBasic/customerBasic.html', directives: [formDirectives] }) export class CustomerBasic { customerForm: ControlGroup; constructor(builder: FormBuilder) { this.customerForm = builder.group({ firstname: [''], lastname: [''], validateZip: ['yes'], zipcode: ['', this.zipCodeValidator] // I only want to validate using the function below if the validateZip control is set to 'yes' }); } zipCodeValidator(control) { if (!control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)) { return { invalidZipCode: true }; } } } 

Solutions Collecting From Web of "Angular2 validator जो कई फॉर्म फ़ील्ड्स पर निर्भर करता है"

अन्य तरीके ने पोस्ट किए गए तरीकों पर दोहराना करने के लिए, यह मैं जिस तरह से कई समूहों को शामिल नहीं करते हैं, वे FormGroup वैधीकरण बनाने वाले FormGroup हैं।

इस उदाहरण के लिए, बस password के प्रमुख नाम प्रदान करें और password फ़ील्ड की confirmPassword

 // Example use of FormBuilder, FormGroups, and FormControls this.registrationForm = fb.group({ dob: ['', Validators.required], email: ['', Validators.compose([Validators.required, emailValidator])], password: ['', Validators.required], confirmPassword: ['', Validators.required], firstName: ['', Validators.required], lastName: ['', Validators.required] }, {validator: matchingPasswords('password', 'confirmPassword')}) 

मानदंडों को लेने के लिए Validators लिए, उन्हें FormGroup या FormControl साथ एक पैरामीटर के रूप में एक फ़ंक्शन FormControl । इस मामले में, मैं एक FormGroup मान्य कर रहा हूं।

 function matchingPasswords(passwordKey: string, confirmPasswordKey: string) { return (group: FormGroup): {[key: string]: any} => { let password = group.controls[passwordKey]; let confirmPassword = group.controls[confirmPasswordKey]; if (password.value !== confirmPassword.value) { return { mismatchedPasswords: true }; } } } 

तकनीकी तौर पर, अगर मैं उनकी चाबियाँ जानता था तो मैं किसी भी दो मानों को मान्य कर सकता था, लेकिन मैं अपने Validators को उसी नाम के रूप में पसंद करना Validators , जो उन्हें वापस लौटाएगा। फ़ंक्शन को तीसरे पैरामीटर लेने के लिए संशोधित किया जा सकता है जो त्रुटि के प्रमुख नाम का प्रतिनिधित्व करता है।

6 दिसंबर 2016 को अपडेट किया गया (v2.2.4)

पूर्ण उदाहरण: https://embed.plnkr.co/ukwCXm/

डेव का उत्तर बहुत ही उपयोगी था, बहुत उपयोगी हालांकि, एक मामूली संशोधन कुछ लोगों को मदद कर सकता है।

यदि आप Control क्षेत्रों में त्रुटियों को जोड़ने की आवश्यकता है, तो आप वास्तविक रूप से प्रपत्र और वैधदाताओं को रख सकते हैं:

 // Example use of FormBuilder, ControlGroups, and Controls this.registrationForm= fb.group({ dob: ['', Validators.required], email: ['', Validators.compose([Validators.required, emailValidator])], password: ['', Validators.required], confirmPassword: ['', Validators.required], firstName: ['', Validators.required], lastName: ['', Validators.required] }, {validator: matchingPasswords('password', 'confirmPassword')}) 

ControlGroup पर एक त्रुटि सेट करने के बजाय, वास्तविक फ़ील्ड पर ऐसा करें:

 function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) { return (group: ControlGroup) => { let passwordInput = group.controls[passwordKey]; let passwordConfirmationInput = group.controls[passwordConfirmationKey]; if (passwordInput.value !== passwordConfirmationInput.value) { return passwordConfirmationInput.setErrors({notEquivalent: true}) } } } 

मैं कांगारू 2 आर.सी. 5 का उपयोग कर रहा हूं लेकिन डेव से उपयोगी जवाब के आधार पर नियंत्रण समूह नहीं मिल सका। मुझे पता चला कि फॉर्म ग्रुप इसके बजाय काम करता है इसलिए मैंने डेव के कोड पर कुछ मामूली अपडेट किए, और मुझे लगा कि मैं दूसरों के साथ साझा करता हूं

अपने घटक फाइल में, फॉर्मग्रुप के लिए एक आयात जोड़ें:

 import {FormGroup} from "@angular/forms"; 

अपने निविष्टियों को परिभाषित करें यदि आपको सीधे फॉर्म नियंत्रण का उपयोग करने की आवश्यकता है:

 oldPassword = new FormControl("", Validators.required); newPassword = new FormControl("", Validators.required); newPasswordAgain = new FormControl("", Validators.required); 

आपके कन्स्ट्रक्टर में, अपना फॉर्म इन्स्तांत करें:

 this.form = fb.group({ "oldPassword": this.oldPassword, "newPassword": this.newPassword, "newPasswordAgain": this.newPasswordAgain }, {validator: this.matchingPasswords('newPassword', 'newPasswordAgain')}); 

अपने क्लास में मेलिंगपैसवर्ड फ़ंक्शन जोड़ें:

 matchingPasswords(passwordKey: string, passwordConfirmationKey: string) { return (group: FormGroup) => { let passwordInput = group.controls[passwordKey]; let passwordConfirmationInput = group.controls[passwordConfirmationKey]; if (passwordInput.value !== passwordConfirmationInput.value) { return passwordConfirmationInput.setErrors({notEquivalent: true}) } } } 

उम्मीद है कि आर.सी. 5 का इस्तेमाल करने वालों को यह मदद मिलेगी। ध्यान दें कि मैंने अभी तक आर सी 6 पर परीक्षण नहीं किया है।

मैटहेडानीएल के उत्तर में विस्तार करने के लिए क्योंकि यह बिल्कुल सही नहीं है। यहां कुछ उदाहरण कोड दिया गया है जो दिखाता है कि ControlGroup को एक ControlGroup को ठीक से कैसे निर्दिष्ट किया ControlGroup

 import {Component} from angular2/core import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/common' @Component({ selector: 'my-app', template: ` <form [ngFormModel]="form"> <label for="name">Name:</label> <input id="name" type="text" ngControl="name"> <br> <label for="email">Email:</label> <input id="email" type="email" ngControl="email"> <br> <div ngControlGroup="matchingPassword"> <label for="password">Password:</label> <input id="password" type="password" ngControl="password"> <br> <label for="confirmPassword">Confirm Password:</label> <input id="confirmPassword" type="password" ngControl="confirmPassword"> </div> </form> <p>Valid?: {{form.valid}}</p> <pre>{{form.value | json}}</pre> ` }) export class App { form: ControlGroup constructor(fb: FormBuilder) { this.form = fb.group({ name: ['', Validators.required], email: ['', Validators.required] matchingPassword: fb.group({ password: ['', Validators.required], confirmPassword: ['', Validators.required] }, {validator: this.areEqual}) }); } areEqual(group: ControlGroup) { let val; let valid = true; for (name in group.controls) { if (val === undefined) { val = group.controls[name].value } else { if (val !== group.controls[name].value) { valid = false; break; } } } if (valid) { return null; } return { areEqual: true }; } } 

यहां काम करने का एक उदाहरण है: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview

कोणीय स्रोत में खुदाई के बहुत सारे हैं लेकिन मुझे एक बेहतर तरीका मिल गया है।

 constructor(...) { this.formGroup = builder.group({ first_name: ['', Validators.required], matching_password: builder.group({ password: ['', Validators.required], confirm: ['', Validators.required] }, this.matchPassword) }); // expose easy access to passworGroup to html this.passwordGroup = this.formGroup.controls.matching_password; } matchPassword(group): any { let password = group.controls.password; let confirm = group.controls.confirm; // Don't kick in until user touches both fields if (password.pristine || confirm.pristine) { return null; } // Mark group as touched so we can add invalid class easily group.markAsTouched(); if (password.value === confirm.value) { return null; } return { isValid: false }; } 

पासवर्ड समूह के लिए HTML भाग

 <div ng-control-group="matching_password" [class.invalid]="passwordGroup.touched && !passwordGroup.valid"> <div *ng-if="passwordGroup.touched && !passwordGroup.valid">Passwords must match.</div> <div class="form-field"> <label>Password</label> <input type="password" ng-control="password" placeholder="Your password" /> </div> <div class="form-field"> <label>Password Confirmation</label> <input type="password" ng-control="confirm" placeholder="Password Confirmation" /> </div> </div> 

कई फॉर्म फ़ील्ड के लिए मान्यताओं को कार्यान्वित करते समय, आपको यह सुनिश्चित करना पड़ेगा कि प्रत्येक फॉर्म नियंत्रण को अपडेट करते समय मान्यकर्ता का पुनः मूल्यांकन किया जाता है। अधिकांश उदाहरण ऐसे परिदृश्य के लिए कोई समाधान प्रदान नहीं करते हैं, लेकिन डेटा संगतता और सही व्यवहार के लिए यह बहुत महत्वपूर्ण है।

कृपया कोयोनर 2 के लिए एक कस्टम सत्यापनकर्ता के अपने कार्यान्वयन को देखें, जो इसे खाते में लेता है: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30

मैं अन्य नियंत्रण का उपयोग कर रहा हूं otherControl.valueChanges.subscribe() अन्य नियंत्रण में परिवर्तनों के लिए और यह thisControl.updateValueAndValidity() और thisControl.updateValueAndValidity() अन्य नियंत्रण के दूसरे दौर को ट्रिगर करने के लिए जब अन्य नियंत्रण बदल जाता है।


मैं भविष्य के संदर्भ के लिए नीचे एक कोड कॉपी कर रहा हूं:

मैच अन्य-validator.ts

 import {FormControl} from '@angular/forms'; export function matchOtherValidator (otherControlName: string) { let thisControl: FormControl; let otherControl: FormControl; return function matchOtherValidate (control: FormControl) { if (!control.parent) { return null; } // Initializing the validator. if (!thisControl) { thisControl = control; otherControl = control.parent.get(otherControlName) as FormControl; if (!otherControl) { throw new Error('matchOtherValidator(): other control is not found in parent group'); } otherControl.valueChanges.subscribe(() => { thisControl.updateValueAndValidity(); }); } if (!otherControl) { return null; } if (otherControl.value !== thisControl.value) { return { matchOther: true }; } return null; } } 

प्रयोग

यहां बताया गया है कि आप इसका उपयोग प्रतिक्रियाशील रूपों के साथ कैसे कर सकते हैं:

 private constructForm () { this.form = this.formBuilder.group({ email: ['', [ Validators.required, Validators.email ]], password: ['', Validators.required], repeatPassword: ['', [ Validators.required, matchOtherValidator('password') ]] }); } 

अधिक अप-टू-डेट वैलिएटर यहां मिल सकते हैं: मोबियस-एमएलएम / एनजी-वैलेटर्स

यहां एक और विकल्प है, जिसके साथ मैं एक पूरे या उप ControlGroup पर निर्भर नहीं ControlGroup लेकिन प्रत्येक Control से सीधे जुड़ा हुआ है।

मेरे पास जो समस्याएं थीं, वे एक दूसरे पर निर्भर थे जो पदानुक्रम से एक साथ नहीं थीं इसलिए मैं एक ControlGroup बनाने में असमर्थ था। इसके अलावा, मेरा सीएसएस सेटअप था कि प्रत्येक नियंत्रण मौजूदा कोणीय वर्गों को यह तय करने के लिए कि क्या त्रुटि स्टाइल प्रदर्शित करना है, जो अधिक जटिल था, नियंत्रण विशिष्ट सत्यापन के बजाय समूह सत्यापन के साथ काम करते समय अधिक लाभान्वित होगा। यह निर्धारित करने की कोशिश कर रहा है कि एक नियंत्रण सही था या नहीं, क्योंकि वैधता नियंत्रण के समूह से जुड़ी हुई थी और प्रत्येक व्यक्ति को नियंत्रित नहीं किया गया था।

मेरे मामले में मैं यह निर्धारित करने के लिए एक चयन बॉक्स का मान चाहता था कि क्या अन्य फ़ील्ड की आवश्यकता होगी या नहीं।

यह घटक पर फॉर्म बिल्डर का उपयोग करके बनाया गया है। चयन ऑब्जेक्ट के मान को सीधे बाध्य करने के बजाय चयन मॉडल के लिए, मैं इसे प्राप्त करने / फ़ंक्शंस सेट करने के लिए बाध्य किया है जो मुझे नियंत्रण के लिए "परिवर्तन" ईवेंट्स को संभाल करने की अनुमति देगा। तो फिर मैं नियंत्रणों के नए मान के आधार पर अन्य नियंत्रण के लिए मैन्युअल रूप से सत्यापन को सक्षम करने में सक्षम हो जाएगा।

यहां प्रासंगिक दृश्य भाग है:

 <select [ngFormControl]="form.controls.employee" [(ngModel)]="employeeModel"> <option value="" selected></option> <option value="Yes">Yes</option> <option value="No">No</option> </select> ... <input [ngFormControl]="form.controls.employeeID" type="text" maxlength="255" [(ngModel)]="request.empID" /> 

संबंधित घटक भाग:

 export class RequestComponent { form: ControlGroup; request: RequestItem; constructor(private fb: FormBuilder) { this.form = fb.group({ employee: new Control("", Validators.required), empID: new Control("", Validators.compose([Validators.pattern("[0-9]{7}"])) }); get employeeModel() { return this.request.isEmployee; } set employeeModel(value) { this.request.isEmployee = value; if (value === "Yes") { this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}"), Validators.required]); this.form.controls["empID"].updateValueAndValidity(); } else { this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}")]); this.form.controls["empID"].updateValueAndValidity(); } } } 

मेरे मामले में मेरे पास हमेशा नियंत्रण के लिए एक पैटर्न मान्यता थी, ताकि validator हमेशा किसी चीज़ पर सेट किया गया हो, लेकिन मुझे लगता है कि यदि आप नियंत्रण से बंधे कोई सत्यापन नहीं करते हैं, तो आप मान्य करने के लिए validator सेट कर सकते हैं।

अद्यतन करें: मॉडल परिवर्तन (ngModelChange)=changeFunctionName($event) कैप्चर करने के अन्य तरीके हैं या (ngModelChange)=changeFunctionName($event) this.form.controls["employee"].valueChanges.subscribe(data => ...)) का उपयोग करके मूल्य परिवर्तनों को नियंत्रित करने के लिए सदस्यता लें this.form.controls["employee"].valueChanges.subscribe(data => ...))

मुझे लगता है कि आपकी सबसे अच्छी शर्त अब के लिए, अपने नियंत्रणों को पकड़ने के लिए एक फार्म समूह बनाने के लिए है। जब आप फ़ंक्शन में अपने नियंत्रण पास को इन्स्टिट्यूट करते हैं, तो इसे मान्य करने के लिए उदाहरण:

  this.password = new Control('', Validators.required); let x = this.password; this.confirm = new Control('', function(c: Control){ if(typeof c.value === 'undefined' || c.value == "") return {required: "password required"}; if(c.value !== x.value) return {error: "password mismatch"}; return null; }); 

मुझे पता है कि यह आपके द्वारा चलाए जा रहे कोणुलियोज 2 के संस्करण पर उच्चतर निर्भर है। यह 2.0.0-अल्फा 466 के खिलाफ परीक्षण किया गया था

अगर किसी के पास एक अच्छा सफ़ेदता है जैसे कि कस्टम वैदिकित्र लिखना (जो जाने का सबसे अच्छा तरीका हो सकता है) इसका स्वागत है

संपादित करें

आप कंट्रोल ग्रुप का भी उपयोग कर सकते हैं और पूरी तरह से उस समूह को मान्य कर सकते हैं।

 this.formGroup = new ControlGroup({}, function(c: ControlGroup){ var pass: Control = <Control>c.controls["password"]; var conf: Control = <Control>c.controls["confirm"]; pass.setErrors(null, true); if(pass.value != null && pass.value != ""){ if(conf.value != pass.value){ pass.setErrors({error: "invalid"}, true); return {error: "error"}; } } return null; }); 

बस अपने डोमेन के अनुसार संदेश संपादित करें।

लुई क्रूज़ का जवाब मेरे लिए बहुत ही उपयोगी था

पूरा करने के लिए सिर्फ सेट ईरर्स रीसेट में जोड़ें: वापसी पासवर्ड ConfirmationInput.setErrors (null);

और सब ठीक काम करता है!

धन्यवाद,

सादर,

TGA

इस रूप में अच्छी तरह से देख रहा था और एनजी 2-सत्यापन पैकेज ( https://www.npmjs.com/package/ng2-validation ) से बराबर का उपयोग करके समाप्त हुआ।

यहां एक उदाहरण है: टेम्पलेट संचालित:

 <input type="password" ngModel name="password" #password="ngModel" required/> <p *ngIf="password.errors?.required">required error</p> <input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/> <p *ngIf="certainPassword.errors?.equalTo">equalTo error</p> 

मॉडल प्रेरित:

 let password = new FormControl('', Validators.required); let certainPassword = new FormControl('', CustomValidators.equalTo(password)); this.form = new FormGroup({ password: password, certainPassword: certainPassword }); 

टेम्पलेट:

 <form [formGroup]="form"> <input type="password" formControlName="password"/> <p *ngIf="form.controls.password.errors?.required">required error</p> <input type="password" formControlName="certainPassword"/> <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p> </form> 

यह मेरा संस्करण है जिसे मैं एक फ़ील्ड में उम्र सुनिश्चित करने के लिए उपयोग किया है, दूसरे क्षेत्र में उम्र के बराबर या उसके बराबर है। मैं फार्म समूहों का भी उपयोग कर रहा हूं, इसलिए मैं group.get बजाय group.get फ़ंक्शन का उपयोग करता group.controls[]

 import { FormGroup } from '@angular/forms'; export function greaterThanOrEqualTo(sourceKey: string, targetKey: string) { return (group: FormGroup) => { let sourceInput = group.get(sourceKey); let targetInput = group.get(targetKey); console.log(sourceInput); console.log(targetInput); if (targetInput.value < sourceInput.value) { return targetInput.setErrors({ notGreaterThanOrEqualTo: true }) } } } 

और घटक में:

  this.form = this._fb.group({ clientDetails: this._fb.group({ currentAge: ['', [Validators.required, Validators.pattern('^((1[89])|([2-9][0-9])|100)$')]], expectedRetirementAge: ['', [Validators.required]] }), }, { validator: greaterThanOrEqualTo('clientDetails.currentAge', 'clientDetails.expectedRetirementAge') }); 

कोणीय 4 पासवर्ड मैच सत्यापन नियम।

अगर आपको त्रुटियों को नियंत्रित करने की आवश्यकता है तो आप इसे कर सकते हैं

 createForm() { this.ngForm = this.fb.group({ 'first_name': ["", Validators.required ], 'last_name' : ["", Validators.compose([Validators.required, Validators.minLength(3)]) ], 'status' : ['active', Validators.compose([Validators.required])], 'phone':[null], 'gender':['male'], 'address':[''], 'email':['', Validators.compose([ Validators.required, Validators.email])], 'password':['', Validators.compose([Validators.required])], 'confirm_password':['', Validators.compose([Validators.required])] }, {validator: this.matchingPassword('password', 'confirm_password')}); } 

फिर constructor पद्धति में इस पद्धति की घोषणा करने की आवश्यकता है जैसे कि

 constructor( private fb: FormBuilder ) { this.createForm(); } 

कंट्रोल ग्रुप पर एक त्रुटि सेट करने के बजाय, वास्तविक फ़ील्ड पर ऐसा करें:

  matchingPassword(passwordKey: string, confirmPasswordKey: string) { return (group: FormGroup): {[key: string]: any} => { let password = group.controls[passwordKey]; let confirm_password = group.controls[confirmPasswordKey]; if (password.value !== confirm_password.value) { return { mismatchedPasswords: true }; } } } 

पासवर्ड समूह के लिए HTML भाग

 <form [formGroup]="ngForm" (ngSubmit)="ngSubmit()"> <div class="form-group"> <label class="control-label" for="inputBasicPassword"> Password <span class="text-danger">*</span></label> <input type="password" class="form-control" formControlName="password" placeholder="Password" name="password" required> <div class="alert text-danger" *ngIf="!ngForm.controls['password'].valid && ngForm.controls['password'].touched">This Field is Required.</div> </div> {{ngForm.value.password | json}} <div class="form-group"> <label class="control-label" for="inputBasicPassword">Confirm Password <span class="text-danger">*</span></label> <input type="password" class="form-control" name="confirm_password" formControlName="confirm_password" placeholder="Confirm Password" match-password="password"> <div class='alert text-danger' *ngIf="ngForm.controls.confirm_password.touched && ngForm.hasError('mismatchedPasswords')"> Passwords doesn't match. </div> </div> <button type="submit" [disabled]="!ngForm.valid" class="btn btn-primary ladda-button" data-plugin="ladda" data-style="expand-left" disabled="disabled"><span class="ladda-label"> <i class="fa fa-save"></i> Create an account <span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div> </span><span class="ladda-spinner"></span></button> </form> 

मैंने इस जवाब के अधिकांश प्रयास किए लेकिन उनमें से कोई भी मेरे लिए काम नहीं करता मुझे यहाँ काम करने का एक उदाहरण मिला https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2