কৌণিক 4 প্রতিক্রিয়াশীল ফর্মটিতে কীভাবে অবৈধ নিয়ন্ত্রণগুলি পাওয়া যায়

Question

আমি নীচের মত কৌণিক একটি প্রতিক্রিয়াশীল ফর্ম আছে:

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm. માન્ય মিথ্যা প্রত্যাবর্তন করে তবে সবকিছু দেখতে ভাল লাগে।

নিয়ন্ত্রণ সংগ্রহের স্থিতির সম্পত্তিটি পরীক্ষা করে দেখার চেষ্টা করেছি। তবে আমি অবাক হয়েছি যদি অবৈধগুলি খুঁজে বের করার এবং ব্যবহারকারীর কাছে প্রদর্শন করার কোনও উপায় থাকে?

Comments

আপনি কেবলমাত্র একটি ত্রুটিযুক্ত ক্ষেত্রগুলি প্রদর্শন করতে চান, আপনি সিএসএস ব্যবহার করে অবৈধ ক্ষেত্রগুলি হাইলাইট করতে বা রঙ করতে পারেন। প্রতিটি অবৈধ ক্ষেত্রের তার শ্রেণি তালিকায় একটি "এনজি-অবৈধ" শ্রেণি সংযুক্ত করা হয়

— 21:40

Answer 1

আপনি কেবল প্রতিটি নিয়ন্ত্রণের মাধ্যমে পুনরাবৃত্তি করতে পারেন এবং স্থিতিটি পরীক্ষা করতে পারেন:

    public findInvalidControls() {
        const invalid = [];
        const controls = this.AddCustomerForm.controls;
        for (const name in controls) {
            if (controls[name].invalid) {
                invalid.push(name);
            }
        }
        return invalid;
    }

Comments

এটির জন্য ধন্যবাদ তবে আমি এটি চেষ্টা করেছিলাম এমনকি এটি আমার ফর্মটি এখনও অবৈধ নয়, এটি অদ্ভুত returns আমি বোঝাতে চাইছি এই কোডটি দেখতে দুর্দান্ত দেখাচ্ছে তবে ফর্ম.অ্যাডিয়ালটি মিথ্যা বলে কেন তা বোঝায় না

— sa_

কি findInvalidControls()তুমি ফিরে?

— ম্যাক্স কোরেটস্কিই

এটি কিছুই দেয় না, অবৈধ খালি is আমি ডিবাগ ওয়াচ স্ক্রিনে একে একে পরীক্ষা করেছিলাম, সমস্ত কন্ট্রোল বৈধ তবে এটি A অ্যাডকাস্টমারফর্ম.অডিয়েল এখনও মিথ্যা ফেরত দেয়।

— sa_

আমার মনে হয় আমি খুঁজে পেয়েছি। একটি ইমেল ক্ষেত্র এবং নিয়মিত অভিব্যক্তি রয়েছে তবে কোনওভাবে নিয়ন্ত্রণের স্থিতিটি পেন্ডিং এবং এটি কারণ হতে পারে

— sa_

@ অ্যাঙ্গুলারআইনপথ.কম - নিয়ন্ত্রণগুলির মধ্যে একটি যদি একটি ফর্ম গ্রুপ হয় তবে আপনার ফাংশনটি অবৈধ ফর্ম গ্রুপটি ফিরিয়ে দেবে এবং নির্দিষ্ট ফর্ম নিয়ন্ত্রণ যা অবৈধ নয়

— জন স্মিথ

Answer 2

আমি কেবল এই সমস্যার সাথে লড়াই করেছি: প্রতিটি ফর্ম ক্ষেত্রটি বৈধ, তবে এখনও ফর্মটি অবৈধ।

দেখা যাচ্ছে যে আমি একটি ফর্মআরেতে 'Validator.required' সেট করেছিলাম যেখানে নিয়ন্ত্রণগুলি গতিশীলভাবে যুক্ত / সরানো হয়। সুতরাং ফর্মআরে শূন্য থাকলেও এটি প্রয়োজনীয় ছিল এবং তাই প্রতিটি দৃশ্যমান নিয়ন্ত্রণ সঠিকভাবে পূরণ করা হলেও ফর্মটি সর্বদা অবৈধ।

আমি ফর্মটির অবৈধ অংশটি খুঁজে পাইনি, কারণ আমার 'ফাইন্ডআইনিডিয়ালকন্ট্রোলস' ফাংশনটি কেবলমাত্র ফর্মগ্রুপ / ফর্মআরাই নয় ফর্মকন্ট্রোলগুলি পরীক্ষা করেছে। সুতরাং আমি এটি কিছুটা আপডেট করেছি:

/* 
   Returns an array of invalid control/group names, or a zero-length array if 
   no invalid controls/groups where found 
*/
public findInvalidControlsRecursive(formToInvestigate:FormGroup|FormArray):string[] {
    var invalidControls:string[] = [];
    let recursiveFunc = (form:FormGroup|FormArray) => {
      Object.keys(form.controls).forEach(field => { 
        const control = form.get(field);
        if (control.invalid) invalidControls.push(field);
        if (control instanceof FormGroup) {
          recursiveFunc(control);
        } else if (control instanceof FormArray) {
          recursiveFunc(control);
        }        
      });
    }
    recursiveFunc(formToInvestigate);
    return invalidControls;
  }

Comments

অবিশ্বাস্যভাবে দরকারী উত্তর। আপনাকে অনেক ধন্যবাদ

— মিক্কি

সম্মত হন, খুব দরকারী উত্তর।

— nenea

Answer 3

একটি অবৈধ কৌণিক নিয়ন্ত্রণে 'এনজি-অবৈধ' নামে সিএসএস শ্রেণি রয়েছে ।

ক্রোমে ডেভটুলগুলির অধীনে কনসোল ট্যাব নির্বাচন করুন।

কনসোল প্রম্পটে টাইপ কমান্ডে:

document.getElementsByClassName('ng-invalid')

আউটপুট এর সাথে একই রকম হওয়া উচিত:

এই ক্ষেত্রে, আন্ডারলাইন করা পাঠ্যটি ফর্ম নিয়ন্ত্রণের জন্য listen-address। এবং ঘিরাযুক্ত পাঠ্য: .ng-invalidনিয়ন্ত্রণটি অবৈধ।

দ্রষ্টব্য: ক্রোমে পরীক্ষিত

Comments

আমার কাছে মনে হয় এটি প্রশ্নের উত্তর দেওয়ার সবচেয়ে সহজ উপায়।

— ckapilla

আপনি আমাকে পাগল হওয়ার হাত থেকে বাঁচিয়েছেন, কেবল যদি আমি আপনাকে একটি পানীয় কিনতে পারি

— অ্যাডাম উইনিপাস

Answer 4

ফর্মগুলি এবং আপনার সমস্ত নিয়ন্ত্রণ উভয়ই কৌণিক শ্রেণীর অ্যাবস্ট্রাক্টকন্ট্রোলকে প্রসারিত করে। প্রতিটি প্রয়োগের বৈধতা ত্রুটিগুলির একটি অ্যাক্সেসর রয়েছে।

let errors = this.AddCustomerForm.errors
// errors is an instance of ValidatorErrors

এপিআই ডক্সে https://angular.io/api/forms/AbstractControl সব উল্লেখ রয়েছে

সম্পাদনা করুন

আমি ভেবেছিলাম ত্রুটি অ্যাকসেসরটি এইভাবে কাজ করেছে তবে গিথুব-এর এই লিঙ্কটি দেখায় যে আরও কিছু লোক আছেন যারা আমার মত একই রকম চিন্তা করেছিলেন https://github.com/angular/angular/issues/11530

যাইহোক, নিয়ন্ত্রণ অ্যাকসেসর ব্যবহার করে আপনি আপনার ফর্মের সমস্ত ফর্মকন্ট্রোলগুলিতে পুনরাবৃত্তি করতে পারেন।

Object.keys(this.AddCustomerForm.controls)
    .forEach( control => {
        //check each control here
        // if the child is a formGroup or a formArray
        // you may cast it and check it's subcontrols too
     })

Comments

এই শূন্য নিয়ন্ত্রণ এমনকি শূন্য নিয়ন্ত্রণগুলি থেকে ফিরে আসে

— sa_

কোনও ত্রুটি না থাকলে এটি নালাগুলি ফিরে আসা উচিত। আপনি কি আপনার টেম্পলেট পোস্ট করতে পারেন?

— 16-29

হ্যাঁ, এটি কাজ করবে না, প্রতিটি ফর্ম নিয়ন্ত্রণগুলিতে সেট করা বিভিন্ন বৈধতা, প্রতিটি ফর্ম নিয়ন্ত্রণগুলিতে তাদের ত্রুটি রয়েছে, ফর্মটি করে না। ম্যাক্সিমাসের উত্তর দেওয়ার মতো নিয়ন্ত্রণগুলি আপনাকে পুনরাবৃত্তি করতে হবে।

— AJT82

আমি প্রতিটি স্বতন্ত্র কনট্রোলগুলির জন্য ত্রুটিগুলি এইরকম অ্যাক্সেস করতে পারি form প্রোফাইল কোড নিয়ন্ত্রণ ['ইমেল'] errors ত্রুটিগুলি

— নজরুল মুহাইমিন

@ AJT_82 প্রকৃতপক্ষে ফর্ম নিজেই ত্রুটিগুলি দেখাতে পারে যদি ফর্মগ্রুপের জন্য কোনও বৈধীকরণকারীর সেট করা থাকে (ক্রস ফিল্ডের বৈধতা সম্পর্কে ডকসগুলি পরীক্ষা করুন, যা গ্রুপের সাথে বৈধতা

— অবলম্বন করে

Answer 5

এখন, কৌণিক 9 এ, আপনি অবৈধ নিয়ন্ত্রণের বৈধতা দেখানোর জন্য চিহ্নআলএসট্যাচড () পদ্ধতিটি ব্যবহার করতে পারেন:

this.AddCustomerForm.markAllAsTouched();

Comments

এটি একটি +1 দিতে যাচ্ছে, কারণ এটি আমাকে আমার কী জানা দরকার তা জানতে সাহায্য করেছে --- যা ব্যবহারকারী যখন প্রয়োজনীয়ভাবে ইনপুটগুলিকে স্পর্শ করেনি তখন বৈধতা বার্তা প্রদর্শন করতে পারে।

— সান হলগুলি

Answer 6

আপনি যদি ফর্মটিতে বেশি ক্ষেত্র না পেয়ে থাকেন তবে আপনি কেবল এফ 12 এবং নিয়ন্ত্রণের উপরে ঘুরে দেখতে পারেন, আপনি ক্ষেত্রের মূল / ছোঁয়া / বৈধ মানগুলির সাথে পপ-আপ দেখতে সক্ষম হবেন- "# ফিল্ডের নাম.ফর্ম-কন্ট্রোল.এন- untouched.ng-अवैध "।

Answer 7

আমি মনে করি আপনার this.form.updateValueAndValidity()প্রতিটি নিয়ন্ত্রণের মধ্যে একই পদ্ধতিটি ব্যবহার করে চেষ্টা করার বা চেষ্টা করার চেষ্টা করা উচিত ।

Answer 8

এটা চেষ্টা কর

 findInvalidControls(f: FormGroup) {
    const invalid = [];
    const controls = f.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
  }

Answer 9

এটি নিয়ন্ত্রণগুলির সমস্ত নাম লগ করবে 😊

for (let el in this.ReactiveForm.controls) {
      if (this.ReactiveForm.controls[el].errors) {
        console.log(el)
      }
 }          

আপনি এটির একটি অ্যারে বা স্ট্রিং তৈরি করতে এবং ব্যবহারকারীর কাছে প্রদর্শন করতে পারেন

Answer 10

আমি AngularInDepth.com- এর কোড উন্নত করতে স্বাধীনতা নিয়েছি , যাতে এটি পুনরাবৃত্তভাবে নেস্টেড ফর্মগুলিতেও অবৈধ ইনপুটগুলি অনুসন্ধান করে। এর চেয়ে বেশি এটি ফর্মআর-এস বা ফর্মগ্রুপ-এস দ্বারা বাসা বাঁধে। কেবলমাত্র শীর্ষ স্তরের ফর্মগ্রুপকে ইনপুট করুন এবং এটি অবৈধ সমস্ত ফর্মকন্ট্রোল ফিরিয়ে দেবে।

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

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        switch( control.constructor.name )
        {
            case 'AbstractControl':
            case 'FormControl':
                if (control.invalid) _invalidControls.push( control );
                break;

            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

যাঁদের এটির প্রয়োজন কেবল তাদের জন্য, তাই তাদের নিজেরাই কোডিং করতে হবে না ..

সম্পাদনা # 1

অনুরোধ করা হয়েছিল যে এটি অবৈধ ফর্মআরাই এবং ফর্মগ্রুপগুলিও ফেরত দেয়, সুতরাং আপনার যদি এটিরও প্রয়োজন হয় তবে এই কোডটি ব্যবহার করুন

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        if (control.invalid) _invalidControls.push( control );
        switch( control.constructor.name )
        {    
            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

Comments

আমি চেষ্টা করেছিলাম, তবে এটি কোনও অবৈধ ফর্মগ্রুপ বা ফর্মআরাই খুঁজে পাচ্ছে না ... কেবলমাত্র অবৈধ ফর্মকন্ট্রোল। আমিও একই ভুল করেছি ... আমার উত্তর দেখুন।

— জেটে

আমি আপনার উত্তর কেস ফিট করতে, আমার উত্তর উন্নত।

— কার্ল জোহান ভ্যালনার

Answer 11

আপনি ফর্মের মান লগ করতে পারেন console.log(this.addCustomerForm.value), এটি সমস্ত নিয়ন্ত্রণের মান কনসোল করবে তারপরে নাল বা "" (খালি) ক্ষেত্রগুলি অবৈধ নিয়ন্ত্রণ নির্দেশ করে

Answer 12

আপনি যদি ফর্মটি বৈধ কিনা তা পরীক্ষা করতে চান এবং কোনও কোড পরিবর্তন করতে চান না, আপনি Chrome বিকাশকারী সরঞ্জাম কনসোলে নিম্নলিখিত কমান্ডটি চালানোর চেষ্টা করতে পারেন। দয়া করে নিশ্চিত করুন যে আপনি কৌনিক অ্যাপ্লিকেশনটি সেই উপাদানটি প্রদর্শিত করছে যা ফর্মটিকে প্রশ্নবিদ্ধ করে।

ng.probe(document.querySelector("app-your-component-selector-name")).componentInstance;

উপরের কমান্ডে আপনার উপাদান নির্বাচকের নামটি প্রতিস্থাপন করতে ভুলবেন না।

এই কমান্ডটি আপনার উপাদান সহ সমস্ত ভেরিয়েবলগুলি তালিকাভুক্ত করবে AddCustomerForm। এখন আপনি যদি এটি প্রসারিত করেন তবে আপনি আপনার সমস্ত নিয়ন্ত্রণের তালিকা দেখতে পাবেন। তারপরে আপনি প্রতিটি নিয়ন্ত্রণটি বৈধ কিনা তা পরীক্ষা করতে প্রসারিত করতে পারেন।

Answer 13

এইচটিএমএল পৃষ্ঠায় খালি বা নাল ফর্ম নিয়ন্ত্রণ মান পরীক্ষা করুন

ফর্ম নিয়ন্ত্রণ মান: {{formname.value | জসন}}