Angular2 सत्यापनकर्ता जो कई रूप क्षेत्रों पर निर्भर करता है

Question

क्या एक सत्यापनकर्ता बनाना संभव है जो मेरे क्षेत्र के वैध होने पर निर्णय लेने के लिए कई मानों का उपयोग कर सकता है?

जैसे अगर ग्राहक का पसंदीदा संपर्क तरीका ईमेल द्वारा है तो ईमेल क्षेत्र की आवश्यकता होनी चाहिए।

धन्यवाद।

---

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

---

    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 };
            }
        }

    }

Comments

हाँ। और यदि आप हमें अपना कोड दिखाते हैं तो हम एक विशिष्ट उत्तर जोड़ सकते हैं।

— माइकल

मैंने एक मूल उदाहरण जोड़ा है। नमूना कोड में, मैं केवल ज़िप कोड को कैसे मान्य कर सकता हूं यदि पिछले मान्यटेप नियंत्रण में 'हां' है?

— साइमन

साइमन, आपके प्रश्न के उत्तर का प्रचार क्यों नहीं किया गया ?

— सुपरजोस

ठीक है, इस सवाल के भविष्य के आगंतुकों को हताशा से बचाने के लिए, मैं इस एनपीएम पैकेज का उपयोग करने की अत्यधिक सलाह देता हूं: npmjs.com/package/ng2-validation । इसमें equalऔर equalToतरीके और अच्छे दस्तावेज हैं!

— माइकल एंजेलो

कोणीय प्रलेखन: angular.io/guide/form-validation#cross-field-validation

— इलियट श्मेलियोट

Answer 1

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

इस उदाहरण के लिए, बस 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मापदंडों को लेने के लिए , उन्हें या functionतो एक पैरामीटर के रूप में FormGroupया साथ लौटने की आवश्यकता होती है FormControl। इस मामले में, मैं मान्य कर रहा हूँ a 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क्योंकि वे त्रुटि वापस आएंगे। फ़ंक्शन को एक तीसरा पैरामीटर लेने के लिए संशोधित किया जा सकता है जो त्रुटि के प्रमुख नाम का प्रतिनिधित्व करता है।

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

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

Comments

@Dave << जिसमें कई समूह शामिल नहीं हैं >> क्या आपका वास्तव में मतलब है << जिसमें कई समूह शामिल हैं >>, या क्या? धन्यवाद

— superjos

यह चेतावनी मार्कअप को हटाने के लिए प्रतीत नहीं होता है जब पासवर्ड Angular 2 RC.1 के साथ मेल खाते हैं

— datatype_void

2.0 में "कंट्रोलग्रुप" मौजूद नहीं है। मैंने

— स्टीफन

@superjos मेरे कहने का मतलब यह था कि। कुछ डेवलपर्स पूरी बात पर FormGroupरखने के बजाय बहु-क्षेत्र सत्यापन को संभालने के लिए एक नेस्टेड बनाने का विकल्प चुनते हैं Validator।

— सायबर_डेव

अगर हमारे पास पासवर्ड, पुष्टिकरण ईमेल और ईमेल की पुष्टि करें तो क्या होगा? [{validator: matchingPasswords('password', 'confirmPassword')},{validator: matchingEmail('email', 'confirmemail')}] मैंने यह कोशिश की लेकिन यह काम नहीं कर रहा है। कोई सुझाव ? @ दवे

— शरण एनापुरपु जुले

Answer 2

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

यदि आपको 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})
    }
  }
}

Comments

डेटा को वैध बनाने के लिए परिवर्तन के समय इसे सही ढंग से अपडेट करने के लिए शाखा passwordConfirmationInput.setErrors(passwordConfirmationInput.validator(passwordConfirmationInput))में उपयोग करें । elsepasswordInput

— औरसपर

@andraaspar मैंने कोशिश की लेकिन मुझे त्रुटि मिल गई TypeError: passwordConfirmationInput.validator is not a function। यह इसलिए है क्योंकि मैंने स्पष्ट रूप से Validators.required के साथ FormControl नहीं बनाया है। मैंने सत्यापनकर्ताओं को खाली छोड़ दिया और इसके बजाय इनपुट पर "आवश्यक" विशेषता का उपयोग किया।

— ४४ पर दाढ़ी

यह मददगार था, लेकिन मैंने देखा कि कोणीय दस्तावेज का रिटर्न प्रकार है {[key: string]: any}, जो setErrors(...)वापस नहीं आता है (अब?)। इसके अलावा setErrors(...), किसी भी त्रुटि है कि पहले से ही मौजूद हैं अधिलेखित कर देता है तो मैं की तरह वर्तमान त्रुटि वस्तु के साथ जोड़ दिया let errors = formGroup.controls[passwordConfirmationKey].errors;और if(!errors) errors={};और errors['notEquivalent'] = true;औरformGroup.controls[dateControlFirst].setErrors(errors);

— स्टीफन

Answer 3

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

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

मैं otherControl.valueChanges.subscribe()अन्य नियंत्रण में बदलावों को सुनने के लिए और अन्य नियंत्रण बदलने 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')
    ]]
  });
}

---

अधिक अप-टू-डेट सत्यापनकर्ता यहां पाए जा सकते हैं: moebius-mlm / ng-validators ।

Comments

अच्छा उत्तर!! मैं घंटे के लिए इस तरह एक समाधान के लिए देख रहा हूँ! कृपया एक छोटे से बदलाव पर विचार करें: किसी फ़ंक्शन को वापस करते समय "इस" संदर्भ को खोने के बजाय, इस तरह से एक फ़ंक्शन लौटाएं: वापसी (नियंत्रण: फॉर्मकंट्रोल) => {/ * कोड * /}

— विन्गोफ्ट

मैं खुशी से मदद कर सकता है। आपको संदर्भ की आवश्यकता क्यों है this? दरअसल, डिबगिंग उद्देश्यों के लिए एक नामित फ़ंक्शन होना अच्छा है।

— स्लाव फोमिन II

प्रदर्शन? यह काम कर रहा है, लेकिन प्रदर्शन-वार मुझे नहीं लगता कि यह अच्छा समाधान है। 'TheControl' को अपडेट करते समय 'ThetherControl का मान बदल जाने पर लूप बन जाएगा?

— नाइटलाइफ़

इसे सदस्यता समाप्त कब किया जाना चाहिए? othercontrol.valuechanges.subscribeकहीं भी सदस्यता समाप्त नहीं हुई।

— 12 जून को जुआना पु

@ जुआनापु मैं मान सकता हूं कि valueChangesजब otherControlइच्छाशक्ति नष्ट हो जाएगी, तो कोणीय का पालन समाप्त हो जाएगा, जिससे सदस्यता भी समाप्त हो जाएगी। हालाँकि, आपकी चिंताएँ मान्य हो सकती हैं। मैं विभिन्न कोड मामलों का उपयोग करके कोणीय के नवीनतम संस्करण के साथ इस कोड को पूरी तरह से डिबग करने का सुझाव दूंगा। कृपया, रिपोर्ट करें कि क्या आपको कोई समस्या मिलेगी।

— स्लाव फोमिन II

Answer 4

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

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

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})
    }
  }
}

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

Comments

@Sam क्या आपने इसे अंतिम संस्करण के साथ काम करने के लिए कुछ बदला है? यह मेरे लिए काम नहीं कर रहा है .. यह कहता है: प्रकार का तर्क '{सत्यापनकर्ता: (समूह: फॉर्मग्रुप) => शून्य; } 'ValidatorFn' प्रकार के पैरामीटर के लिए लागू नहीं है।

— xtof

नहीं, मुझे कुछ भी बदलने की आवश्यकता नहीं थी - मेरे लिए ऊपर दिए गए नमूना कोड ने Angular2 फाइनल के साथ काम किया। क्या आप ऊपर दिए गए सटीक कोड का उपयोग कर रहे हैं?

— सैम

अच्छा समाधान @ चंग। अगर आप अपना कंफर्म पासवर्ड भरने के बाद अपना पासवर्ड बदलते हैं। सत्यापन काम नहीं करता है। आप कोशिश कर सकते हैंif (passwordInput.value !== passwordConfirmationInput.value) { return passwordConfirmationInput.setErrors({ notEquivalent: true }); } else { return passwordConfirmationInput.setErrors(null); }

— मारियो Shtika

Answer 5

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

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>

Comments

जब मिलान_पासवर्ड के लिए सत्यापन चलाया जाता है तो पहला नाम नियंत्रण का भी मूल्यांकन किया जाता है? जो मैं नहीं चाहूंगा!

— पास्कल

Answer 6

मैथ्यूडेनियल के उत्तर पर विस्तार करने के लिए क्योंकि यह बिल्कुल सही नहीं है। यहाँ कुछ उदाहरण कोड है जो दिखाता है कि कैसे एक सत्यापनकर्ता को ठीक से असाइन करना है 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

Comments

क्या होगा अगर हम रेडियोबॉटन और चेकबॉक्स जोड़ते हैं कि इन दोनों का मूल्य कैसे प्राप्त करें?

— परदीप जैन

ControlGroupइसे देखने वाले FormGroupकिसी के पक्ष में हटा दिया जाता है । डॉक्स और लर्न एंगुलर 2 उदाहरण

— सॉफली

Answer 7

यहां एक और विकल्प है कि मैं इसके साथ आने में सक्षम था जो कि एक संपूर्ण या उप पर निर्भर नहीं है 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)या उपयोग करके मूल्य परिवर्तनों को नियंत्रित करने के लिए सदस्यता लेने के अन्य तरीके हैंthis.form.controls["employee"].valueChanges.subscribe(data => ...))

Answer 8

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

Answer 9

यह भी देख रहा था और equalTong2- सत्यापन पैकेज ( 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>

Answer 10

यहाँ मेरा संस्करण है जिसका उपयोग मैंने यह सुनिश्चित करने के लिए किया था कि एक क्षेत्र में किसी अन्य क्षेत्र में उम्र के बराबर या उससे अधिक है। मैं फॉर्म समूहों का भी उपयोग कर रहा हूं, इसलिए मैं 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')
    });

Answer 11

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

    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;
    });

मुझे पता है कि यह higly angularjs2 के संस्करण पर निर्भर करता है जिसे आप चला रहे हैं। यह 2.0.0-अल्फा.46 के खिलाफ परीक्षण किया गया था

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

संपादित करें

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

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;
    });

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

Answer 12

लुई क्रूज़ का जवाब मेरे लिए बहुत मददगार था।

पूरा करने के लिए बस सेटयर्स रिसेट में कुछ और जोड़ें: कूटशब्द लौटाएँ।

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

धन्यवाद,

सादर,

TGA

Answer 13

कोणीय 8 पासवर्ड पुष्टिकरण क्षेत्र पर मान्य करने का उदाहरण

FYI करें: यह पासवर्डकॉन्फ़र्म क्षेत्र पर सत्यापन को अद्यतन नहीं करेगा यदि इस सत्यापन के पारित होने के बाद मुख्य "पासवर्ड" फ़ील्ड को बदल दिया जाए। लेकिन, जब उपयोगकर्ता पासवर्ड फ़ील्ड में टाइप करता है, तो आप पासवर्ड पुष्टि फ़ील्ड को अमान्य कर सकते हैं

<input
  type="password"
  formControlName="password"
  (input)="registerForm.get('passwordConfirm').setErrors({'passwordMatches': true})"
/>

register.component.ts

import { PasswordConfirmValidator } from './password-confirm-validator';

export class RegisterComponent implements OnInit {
  registerForm: FormGroup = this.createRegisterForm({
    username: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [
      Validators.required,
      Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
      Validators.minLength(8)
    ]),
    passwordConfirm: new FormControl('', [
      Validators.required,
      PasswordConfirmValidator //custom validator
    ])
  });
}

पासवर्ड से पुष्टि-validator.ts

import { AbstractControl } from '@angular/forms';

export function PasswordConfirmValidator(control: AbstractControl) {
  if(void 0 === control){ return null; }
  if(
    void 0 !== control.parent &&
    void 0 !== control.parent.controls &&
    void 0 !== control.parent.controls['password'] &&
    control.parent.controls['password'].value === control.value
  ){
    return null;
  }
  return {passwordMatches: true};
}

register.component.html

{{registerForm.get('passwordConfirm').hasError('passwordMatches')}}

Answer 14

मैं पुस्तकालय का उपयोग करने का सुझाव दूंगा ng-form-rules। यह घटक से डिकोड किए गए सत्यापन तर्क के साथ सभी विभिन्न प्रकार के फॉर्म बनाने के लिए एक बढ़िया पुस्तकालय है और यह फॉर्म में अन्य क्षेत्रों के मूल्य परिवर्तनों पर निर्भर कर सकता है। उनके पास महान दस्तावेज , उदाहरण और एक वीडियो है जो इसकी कार्यक्षमता का एक गुच्छा दिखाता है । इस तरह से सत्यापन करना जो आप करने की कोशिश कर रहे हैं वह तुच्छ है।

आप कुछ उच्च स्तर की जानकारी और एक बुनियादी उदाहरण के लिए उनके README की जांच कर सकते हैं ।

Comments

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

— नादिन

Answer 15

कोणीय 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>