আমি কীভাবে ম্যানুয়ালি একটি কৌণিক ফর্ম ক্ষেত্রটিকে অবৈধ হিসাবে সেট করতে পারি?

Question

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

টেমপ্লেট:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

লগইন পদ্ধতি:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
      this.loginForm.controls.email.invalid = true;
      this.loginForm.controls.password.invalid = true; 
    });
  }

সত্যকে ইনপুটগুলি অবৈধ পতাকা নির্ধারণের পাশাপাশি email.validপতাকাটিকে মিথ্যা loginForm.invalidহিসাবে সেট করার চেষ্টা করেছি , এবং সত্যকেও সেট করার চেষ্টা করেছি । এর মধ্যে কোনওটিই ইনপুটগুলিকে তাদের অবৈধ অবস্থা প্রদর্শন করে না।

Comments

আপনার ব্যাকএন্ডটি কৌণিকের চেয়ে আলাদা বন্দরে রয়েছে? যদি তা হয় তবে এটি কোনও সিওআরএস সমস্যা হতে পারে। আপনি ব্যাকএন্ডের জন্য কী ফ্রেমওয়ার্ক ব্যবহার করছেন।

— মাইক 3355

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

— বিকাশকারী 0

@ ডেভেলপার ০৩৩ এখানে পার্টিতে কিছুটা দেরি করে তবে সেগুলি প্রতিক্রিয়াশীল ফর্মের মতো নয়, তবে একটি টেম্পলেট-চালিত ফর্মের মতো লাগে।

— এনিটিম্প

Answer 1

উপাদান মধ্যে:

formData.form.controls['email'].setErrors({'incorrect': true});

এবং এইচটিএমএলে:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>

Comments

এবং এরপরে আপনি কীভাবে ত্রুটিটি মুছে ফেলবেন? setErrors({'incorrect': false})বা setErrrors({})আমার জন্য কাজ করছে না

— রোবস্টে

আমি কি ক্ষেত্রগুলি পুনরায় সেট করার পরিবর্তে বৈধ বা অবৈধ হিসাবে পুরো প্রতিক্রিয়াশীল ফর্মটি সেট করতে পারি?

— xtremist

@ রোবসটে আপনি ত্রুটিগুলি ম্যানুয়ালি মুছে ফেলতে পারবেনsetErrrors(null)

— ইদ্রিস খান

এই উত্তর ছাড়াও: formData.form.controls['email'].markAsTouched();নীচে উল্লিখিত @ এমফারাহ্মান্ড ছাড়া এই কোডটি আমার পক্ষে কাজ করে না । ব্যবহার setErrors({'incorrect': true})শুধু সেট ng-invalidইনপুট জন্য css বর্গ। আমি আশা করি এটি কাউকে সাহায্য করবে

— বড়বাস

এবং যদি আরও "বৈধ" যেমন "আবশ্যক" থাকে - সেটআররিজগুলি (নাল) সেই ত্রুটিটি মুছে দেয় তবে কী হবে?

— করে_ডন্ট_বুলি_মে_স_ও_লর্ডস 1'19

Answer 2

জুলিয়া পাসিনকোভার উত্তরে যুক্ত করা

উপাদানটিতে বৈধতা ত্রুটি সেট করতে:

formData.form.controls['email'].setErrors({'incorrect': true});

উপাদানটিতে বৈধতা ত্রুটিটি আনসেট করতে:

formData.form.controls['email'].setErrors(null);

এটি ব্যবহার করে ত্রুটিগুলি আনসেট করার ক্ষেত্রে সাবধান থাকুন এটি সমস্ত ত্রুটিটি nullওভাররাইট করে দেবে। আপনি যদি কিছুটা আপনার চারপাশে রাখতে চান তবে আপনাকে প্রথমে অন্যান্য ত্রুটির অস্তিত্ব পরীক্ষা করতে হবে:

if (isIncorrectOnlyError){
   formData.form.controls['email'].setErrors(null);
}

Comments

ফর্মডাটা.ফর্ম.কন্ট্রোলস ['ইমেল'] এর মতো কিছু ব্যবহার করে বৈধতা ত্রুটিটি আনসেট করা সম্ভব set

— rudrasiva86

প্রতিক্রিয়াশীল ফর্মগুলি সম্পর্কে কী?

— মেহমাদোভিচ

Answer 3

আমি setErrors()একটি টেমপ্লেট আকারে একটি এনজিএমডেল চেঞ্জ হ্যান্ডলারের ভিতরে কল করার চেষ্টা করছিলাম। যতক্ষণ না আমি একটি টিকটি অপেক্ষা করছিলাম ততক্ষণ এটি কাজ করে না setTimeout():

টেমপ্লেট:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

উপাদান:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    // setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    // to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

এর মতো গোছা আমাকে প্রতিক্রিয়াশীল ফর্মগুলি পছন্দ করে তুলছে।

Comments

Cannot find name 'NgModel'.@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;এই ইস্যুটির জন্য কোনও সমাধানের জন্য ত্রুটি

— 3015

সেটটাইমআউটস ব্যবহার করার কী আছে? আমি এটি লক্ষ্য করেছি পাশাপাশি দেখা যাচ্ছে নিয়ন্ত্রণগুলি তত্ক্ষণাত তাদের আপডেট হয় না। এটি এই সীমাবদ্ধতাটি ঘিরে কাজ করার জন্য প্রচুর হ্যাকি কোডের পরিচয় দেয়।

— জ্যাক শেক্সওয়ার্থ

ধন্যবাদ। আমি জানতাম setErrorsতবে আমি ব্যবহার না করা পর্যন্ত এটি কার্যকর হয়নিsetTimeout

— সাম্পগুন

Answer 4

উপাদান 2 এর নতুন সংস্করণে যা এর নিয়ন্ত্রণের নামটি মাদুর উপসর্গ সেট দিয়ে শুরু হয় Eরফ () কাজ করে না, পরিবর্তে জুইলার উত্তরটি এতে পরিবর্তন করা যেতে পারে:

formData.form.controls['email'].markAsTouched();

Answer 5

এখানে একটি উদাহরণ যা কাজ করে:

MatchPassword(AC: FormControl) {
  let dataForm = AC.parent;
  if(!dataForm) return null;

  var newPasswordRepeat = dataForm.get('newPasswordRepeat');
  let password = dataForm.get('newPassword').value;
  let confirmPassword = newPasswordRepeat.value;

  if(password != confirmPassword) {
    /* for newPasswordRepeat from current field "newPassword" */
    dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
    if( newPasswordRepeat == AC ) {
      /* for current field "newPasswordRepeat" */
      return {newPasswordRepeat: {MatchPassword: true} };
    }
  } else {
    dataForm.controls["newPasswordRepeat"].setErrors( null );
  }
  return null;
}

createForm() {
  this.dataForm = this.fb.group({
    password: [ "", Validators.required ],
    newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
    newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
  });
}

Comments

এটি "হ্যাকি" হতে পারে তবে আমি এটি পছন্দ করি কারণ আপনাকে কৌণিক উপাদান ইনপুট ত্রুটিগুলির সাথে কাজ করার জন্য একটি কাস্টম ত্রুটি স্ট্যাটম্যাচার সেট করতে হবে না!

— ডেভিড মেলিন

Answer 6

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

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

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

যদি চেকবক্সটি মিথ্যাতে (চেক করা না থাকে) সেট করা থাকে তবে আমরা ড্রপডাউনটিতে প্রয়োজনীয় বৈধকারককে সাফ করি এবং এটিকে একটি প্রাথমিক অবস্থায় পুনরায় সেট করি।

এছাড়াও - ক্ষেত্রের পরিবর্তনগুলি পর্যবেক্ষণ থেকে সাবস্ক্রাইব করতে ভুলবেন না!

Answer 7

আপনি ভিউচিল্ডের 'টাইপ' এটিকে এনজিফর্মেও বদলে দিতে পারেন:

@ViewChild('loginForm') loginForm: NgForm;

এবং তারপরে আপনার নিয়ন্ত্রণগুলিকে একইভাবে নির্দেশ করুন @ জুলিয়া উল্লিখিত:

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.

      this.loginForm.controls['email'].setErrors({ 'incorrect': true});
      this.loginForm.controls['password'].setErrors({ 'incorrect': true});
    });
  }

ত্রুটিগুলি শূন্য করতে সেট করা ইউআইতে থাকা ত্রুটিগুলি মুছে ফেলবে:

this.loginForm.controls['email'].setErrors(null);

Answer 8

যদিও এর দেরিতে তবে নিম্নলিখিত সমাধানগুলি আমাকে গঠন করেছিল।

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;

Comments

এই শেষ লাইন কিছু করছে?

— টম ব্রিটো

Answer 9

ইউনিট পরীক্ষার জন্য:

spyOn(component.form, 'valid').and.returnValue(true);