কৌণিক 2 বৈধকারী যা একাধিক ফর্ম ক্ষেত্রে নির্ভর করে


118

আমার ক্ষেত্রটি বৈধ কিনা তা সিদ্ধান্ত নিতে একাধিক মান ব্যবহার করতে পারে এমন কোনও বৈধকরণকারী তৈরি করা কি সম্ভব?

যেমন গ্রাহকের পছন্দের যোগাযোগের পদ্ধতিটি যদি ইমেলের মাধ্যমে হয় তবে ইমেল ক্ষেত্রের প্রয়োজন।

ধন্যবাদ।


উদাহরণ কোড সহ আপডেট হয়েছে ...


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

    }

হ্যাঁ. এবং আপনি যদি আমাদের আপনার কোড দেখান তবে আমরা একটি নির্দিষ্ট উত্তর যুক্ত করতে পারি।
মিশেলেম

আমি একটি প্রাথমিক উদাহরণ যুক্ত করেছি। পূর্ববর্তী বৈধতা জিপ নিয়ন্ত্রণে 'হ্যাঁ' থাকলে আমি নমুনা কোডে কীভাবে কেবল পিন কোডকে বৈধতা দিতে পারি?
সাইমন

সাইমন, কেন প্রচার না আপনার প্রশ্নের উত্তর?
সুপারজোজ

6
ঠিক আছে, এই প্রশ্নের ভবিষ্যতের দর্শকদের অনেক হতাশাগুলি বাঁচাতে আমি এই এনপিএম প্যাকেজটি ব্যবহার করার জন্য অত্যন্ত পরামর্শ দিচ্ছি: npmjs.com/package/ng2- માન્યকরণ । এটিতে বিল্ড ইন equalএবং equalToপদ্ধতি এবং ভাল ডকুমেন্টেশন রয়েছে!
মাইচেলঞ্জেলো

2
কৌণিক ডকুমেন্টেশন: কৌণিক.ইও
গাইড

উত্তর:


147

অন্যরা যে পদ্ধতিগুলি পোস্ট করেছে সেগুলি সম্পর্কে পুনরাবৃত্তি করার জন্য, আমি এভাবে 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পরামিতি হিসাবে একটি ফেরত দেওয়া দরকার । এই ক্ষেত্রে, আমি একটি যাচাই করছি 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 : // e એમ્બેડ. plnkr.co/ukwCXm/


@ ডেভ << যা একাধিক গোষ্ঠী জড়িত না >> আপনি কি আসলেই বোঝাতে চেয়েছিলেন << যার মধ্যে একাধিক গ্রুপ জড়িত >> >> বা কী? ধন্যবাদ
সুপারজোজ

যখন পাসওয়ার্ডগুলি কৌনিক 2 আরসি 1
ডেটাটাইপ_ভয়েড

"কন্ট্রোলগ্রুপগুলি" 2.0 তে বিদ্যমান বলে মনে হয় না। আমি 23:58 এ 'ফর্মগ্রুপ'
স্টিফেন

@ সুপেরজোস আমি এই কথাটি বোঝাতে চাইছি না। কিছু বিকাশকারী পুরো জিনিসটির FormGroupপরিবর্তে মাল্টি-ফিল্ড বৈধতা হ্যান্ডেল করার জন্য নেস্টেড তৈরি করতে পছন্দ করে Validator
সাইবার_ডেভ

1
আমাদের যদি পাসওয়ার্ড, কনফার্মপাসওয়ার্ড এবং ইমেল থাকে এবং ইমেলের নিশ্চয়তা থাকে? [{validator: matchingPasswords('password', 'confirmPassword')},{validator: matchingEmail('email', 'confirmemail')}] আমি এটি চেষ্টা করেছি কিন্তু এটি কাজ করছে না। কোনও পরামর্শ ? @ ডেভ
শরণ আইনপুরাপু

51

ডেভ এর উত্তর খুব, খুব সহায়ক ছিল। তবে সামান্য পরিবর্তন কিছু লোককে সহায়তা করতে পারে।

ক্ষেত্রে আপনাকে যদি 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})
    }
  }
}

6
ব্যবহারের passwordConfirmationInput.setErrors(passwordConfirmationInput.validator(passwordConfirmationInput))মধ্যে elseশাখা এটি সঠিকভাবে আপডেট করেন করার জন্য একটি পরিবর্তন করতে passwordInputডেটা বৈধ করে তোলে।
andraaspar

@ ইন্দ্রাস্পার আমি চেষ্টা করেছিলাম কিন্তু ত্রুটিটি পেয়েছি TypeError: passwordConfirmationInput.validator is not a function। এর কারণ আমি স্পষ্টভাবে Validators.required দিয়ে ফর্মকন্ট্রোল তৈরি করি নি। আমি ভ্যালিডিটারকে ফাঁকা রেখেছি এবং পরিবর্তে ইনপুটটিতে "প্রয়োজনীয়" বৈশিষ্ট্যটি ব্যবহার করেছি।
beardedlinuxgeek

6
এটি সহায়ক ছিল, কিন্তু আমি লক্ষ্য করেছি যে কৌণিক ডকুমেন্টেশনের একটি রিটার্ন টাইপ রয়েছে {[key: string]: any}, যা setErrors(...)ফিরে আসে না (আর?)। এছাড়াও setErrors(...): কোনো ত্রুটি ইতিমধ্যে উপস্থিত মুছে ফেলা হয় তাই আমি মত বর্তমান ত্রুটি বস্তু যোগ করা let errors = formGroup.controls[passwordConfirmationKey].errors;এবং if(!errors) errors={};এবং errors['notEquivalent'] = true;এবংformGroup.controls[dateControlFirst].setErrors(errors);
স্টিফেন

32

একাধিক ফর্ম ক্ষেত্রগুলির জন্য বৈধকরণকারীদের প্রয়োগ করার সময়, আপনাকে অবশ্যই নিশ্চিত করতে হবে, ফর্ম নিয়ন্ত্রণের প্রতিটি আপডেট হয়ে গেলে ভ্যালিডিটারগুলি পুনরায় মূল্যায়ন করা হয়। বেশিরভাগ উদাহরণগুলি এ জাতীয় দৃশ্যের জন্য কোনও সমাধান সরবরাহ করে না, তবে ডেটা ধারাবাহিকতা এবং সঠিক আচরণের জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।

অনুগ্রহ করে আমার কৌনিক বৈধকরণকারীর অ্যাঙ্গুলার 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')
    ]]
  });
}

আরও আপ-টু-ডেট ভ্যালিডিটার এখানে পাওয়া যাবে: ময়েবিয়াস-এমএলএম / এনজি-ভ্যালিডিটার


চমৎকার উত্তর!! আমি কয়েক ঘন্টা ধরে এর মতো সমাধান খুঁজছি! দয়া করে কিছুটা পরিবর্তন বিবেচনা করুন: কোনও ফাংশন ফিরিয়ে দেওয়ার সময় "এই" রেফারেন্সটি হারিয়ে ফেলার পরিবর্তে এই জাতীয় ফাংশনটি ফিরিয়ে দিন: রিটার্ন (নিয়ন্ত্রণ: ফর্মকন্ট্রোল) => {/ * কোড * /}
ভিংটফট

আমি সাহায্য করতে পেরে আনন্দিত. আপনার কেন রেফারেন্স দরকার this? আসলে, ডিবাগিংয়ের উদ্দেশ্যে একটি নামকৃত ফাংশন রাখা ভাল।
স্লাভা ফমিন দ্বিতীয়

কর্মক্ষমতা? এটি কাজ করছে তবে পারফরম্যান্স-ভিত্তিতে আমি মনে করি না এটি ভাল সমাধান। 'এই কনট্রোল' আপডেট করার সময় 'ওথারকন্ট্রোলের মান পরিবর্তিত হলে লুপ তৈরি হবে, তাই না?
রাতElf91

কখন এটি সাবস্ক্রাইব করা উচিত? othercontrol.valuechanges.subscribeকোথাও সাবস্ক্রাইব করা হয়নি।
জুনা পু

@ জুয়ানাপু আমি অনুমান করব যে অ্যাঙ্গুলার valueChangesপর্যবেক্ষণযোগ্যকে শেষ করে otherControlদিবে যখন ধ্বংস হয়ে যাবে, যার ফলে সাবস্ক্রিপশনটিও বন্ধ হয়ে যাবে। তবে, আপনার উদ্বেগগুলি বৈধ হতে পারে। আমি বিভিন্ন পরীক্ষার কেস ব্যবহার করে অ্যাঙ্গুলারের সর্বশেষ সংস্করণ সহ এই কোডটি পুঙ্খানুপুঙ্খভাবে ডিবাগ করার পরামর্শ দেব। দয়া করে, আপনি যদি কোনও সমস্যা খুঁজে পান তবে ফিরে রিপোর্ট করুন।
স্লাভা ফমিন দ্বিতীয়

23

আমি কৌনিক 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 ব্যবহার করছেন তাদের সহায়তা করবে helps মনে রাখবেন যে আমি আরসি .6. তে এখনও পরীক্ষা করি নি।


@ সাম আপনি চূড়ান্ত সংস্করণ দিয়ে কাজ করতে কিছু পরিবর্তন করেছেন? এটি আমার পক্ষে কাজ করছে না .. এটি বলে: '{ভ্যালিডেটর: (গ্রুপ: ফর্মগ্রুপ) => বাতিল; 'ValidatorFn' টাইপের প্যারামিটারে} 'নির্ধারিত নয়।
xtof

না, আমার কোনও পরিবর্তন করার দরকার নেই - আমার জন্য উপরের নমুনা কোডটি Angular2 ফাইনালের সাথে কাজ করেছে। আপনি কি উপরের মতো সঠিক কোডটি ব্যবহার করছেন?
স্যাম

ভাল সমাধান @ চ্যাং। আপনার পাসওয়ার্ডটি পূরণ করার পরে আপনি যদি আপনার পাসওয়ার্ড পরিবর্তন করেন। বৈধতা কাজ করে না। আপনি চেষ্টা করতে পারেনif (passwordInput.value !== passwordConfirmationInput.value) { return passwordConfirmationInput.setErrors({ notEquivalent: true }); } else { return passwordConfirmationInput.setErrors(null); }
মারিও শিতিকা

16

কৌণিক উত্সে প্রচুর খনন করা হয়েছে তবে আমি আরও একটি ভাল উপায় খুঁজে পেয়েছি।

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

পাসওয়ার্ড গ্রুপের জন্য এইচটিএমএল অংশ

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

ম্যাচিং-পাসওয়ার্ডের বৈধতা যখন চালানো হয় তখন প্রথম নাম নিয়ন্ত্রণটিও মূল্যায়ন করা হয়? যা আমি চাই না!
পাস্কাল

16

ম্যাথিউডানিয়েলের উত্তরটি প্রাসঙ্গিক করা কারণ এটি সঠিক নয়। এখানে কয়েকটি উদাহরণ কোড যা দেখায় যে কীভাবে একটিকে একটি বৈধকারীকে সঠিকভাবে নির্ধারণ করতে হয় 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= পূর্বরূপ


যদি আমরা রেডিওব্লটন এবং চেকবক্স যুক্ত করি তবে কীভাবে এই দুটির মান পাওয়া যায়?
পারদীপ জৈন

2
ControlGroupএটি FormGroupদেখার জন্য যে কেউ তার পক্ষে সরানো হয়েছে । ডক্স এবং শিখুন কৌণিক 2 উদাহরণ
ধীরে ধীরে

2

এখানে আরও একটি বিকল্প রয়েছে যা আমি সামনে আসতে সক্ষম হয়েছি এটি সম্পূর্ণ বা সাব উপর নির্ভর করে না 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 => ...))



1

equalToএটিও খুঁজছিল এবং এনজি 2-বৈধতা প্যাকেজ ( https://www.npmjs.com/package/ng2- માન્યকরণ) ব্যবহার করে শেষ হয়েছিল )

এখানে একটি উদাহরণ: টেম্পলেট চালিত:

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

1

এক ক্ষেত্রে আমার বয়স নিশ্চিত করার জন্য আমার ব্যবহৃত সংস্করণটি অন্য ক্ষেত্রের বয়সের চেয়ে বেশি বা সমান। আমি ফর্ম গ্রুপগুলিও ব্যবহার করছি, তাই আমি 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')
    });

0

আমি মনে করি আপনার সেরা বাজি, আপাতত, আপনার নিয়ন্ত্রণগুলি ধরে রাখতে একটি ফর্মগ্রুপ তৈরি করা। আপনি যখন নিজের কন্ট্রোল পাসটি যাচাই করতে ফাংশনে ইনস্ট্যান্ট করেন। উদাহরণ:

    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-alpha.46 এর বিপরীতে পরীক্ষা করা হয়েছিল

কারও কাছে যদি কাস্টম ভ্যালিডেটার লেখার মতো আরও ভাল চাপ থাকে (যা যাওয়ার সর্বোত্তম উপায় হতে পারে) এটি স্বাগত।

সম্পাদনা

আপনি কন্ট্রোলগ্রুপও ব্যবহার করতে পারেন এবং গোষ্ঠীটিকে পুরোপুরি বৈধ করতে পারেন।

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

আপনার ডোমেন অনুযায়ী বার্তাগুলি সম্পাদনা করুন।


0

লুই ক্রুজ এর উত্তর আমার জন্য খুব সহায়ক ছিল।

সম্পূর্ণরূপে কেবলমাত্র অন্যটিতে যুক্ত করুনএরার্সস পুনরায় সেট করুন: ফেরত পাসওয়ার্ড কনফার্মেশনআইনপুট.সেটররিজ (নাল);

এবং সব ঠিক আছে!

তোমাকে ধন্যবাদ,

শুভেচ্ছা সহ,

TGA


0

কৌণিক 8 পাসওয়ার্ড নিশ্চিতকরণ ক্ষেত্রে যাচাইয়ের উদাহরণ

এফওয়াইআই: এই বৈধতাটি পাস করার পরে যদি মূল "পাসওয়ার্ড" ক্ষেত্রটি পরিবর্তন করা হয় তবে এটি পাসওয়ার্ড কনফার্ম ফিল্ডে বৈধতা আপডেট করবে না । কিন্তু, যখন কোনও ব্যবহারকারী পাসওয়ার্ড ক্ষেত্রে টাইপ করেন আপনি পাসওয়ার্ড কনফার্ম ফিল্ডটি বাতিল করতে পারেন

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

-2

আমি গ্রন্থাগারটি ব্যবহার করার পরামর্শ দেব ng-form-rules। উপাদান থেকে decoupled বৈধতা যুক্তি সহ বিভিন্ন ধরণের ফর্ম তৈরি করার জন্য এটি দুর্দান্ত একটি গ্রন্থাগার এবং এটি ফর্মের অন্যান্য অঞ্চলের মান পরিবর্তনের উপর নির্ভর করতে পারে। তাদের কাছে দুর্দান্ত ডকুমেন্টেশন , উদাহরণ এবং একটি ভিডিও রয়েছে যা এর কার্যকারিতাটির একটি গোছা দেখায় । আপনি যা করতে চেষ্টা করছেন এরূপে বৈধতা দেওয়া তুচ্ছ।

কিছু উচ্চ স্তরের তথ্য এবং একটি প্রাথমিক উদাহরণের জন্য আপনি তাদের README পরীক্ষা করে দেখতে পারেন ।


2
আমি সবকিছুর জন্য একটি গ্রন্থাগার আছে এমন ধারণাটি পছন্দ করি না ... লাইব্রেরিগুলি এই সমস্যার সমাধান নয়। প্রায়শই আপনি কেবলমাত্র অন্য লাইব্রেরি ব্যবহার করে নতুন সমস্যা তৈরি করবেন, এছাড়াও কৌনিক আপডেট হওয়ার সাথে সাথে আপনাকে স্টাফটি আপ টু ডেট রাখতে হবে। কাঠামোগত দ্বারা কৌনিক ফর্ম ব্যবহার না করে কেন?
নাদাইন

-3

কৌণিক 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
      };
    }
  }
}

পাসওয়ার্ড গ্রুপের জন্য এইচটিএমএল অংশ

<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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.