मैं मैन्युअल रूप से एक कोणीय प्रपत्र फ़ील्ड को अमान्य के रूप में कैसे सेट कर सकता हूं?

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विधि का उपयोग कर सकते हैं । टिप्स: आपको अपने घटक फ़ाइल पर आवश्यक सत्यापनकर्ता जोड़ना चाहिए। इसके अलावा प्रतिक्रियात्मक रूपों के साथ ngModel का उपयोग करने का एक विशिष्ट कारण है?

— डेवलपर

@ developer033 यहां पार्टी के लिए थोड़ा लेट हो गए, लेकिन वे रिएक्टिव फॉर्म नहीं दिख रहे हैं, लेकिन एक टेम्प्लेट-चालित रूप है।

— दोपहर

Answer 1

घटक में:

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

और HTML में:

<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({})मेरे लिए काम नहीं कर रहे हैं

— Robouste

क्या मैं फ़ील्ड को रीसेट करने के बजाय संपूर्ण प्रतिक्रियाशील फ़ॉर्म को वैध या अमान्य के रूप में सेट कर सकता / सकती हूं?

— एक्स्ट्रीमिस्ट

@Robouste आप त्रुटियों को मैन्युअल रूप से हटा सकते हैंsetErrrors(null)

— Idrees Khan

इस उत्तर के अलावा: यह कोड मेरे बिना काम नहीं करता है formData.form.controls['email'].markAsTouched();जैसा कि नीचे उल्लेखित @ M.Farahmand है। इनपुट के लिए setErrors({'incorrect': true})बस सेट ng-invalidसीएसएस क्लास का उपयोग करना । मुझे उम्मीद है कि यह किसी की मदद करता है।

— बाराबस

और क्या होगा यदि "आवश्यक" जैसे अधिक सत्यापनकर्ता हैं - क्या सेटअरर्स (अशक्त) उस त्रुटि को हटाता है?

— कृपया_डॉट_बुल्ली_मे_ओस_होलर्स

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

क्या formData.form.controls ['email'] जैसी किसी चीज़ का उपयोग करके सत्यापन त्रुटि को अनसेट करना संभव है। setErrors ({'गलत': false});

— रुद्रशिव r६

प्रतिक्रियाशील रूपों के बारे में क्या?

— सीडमे

Answer 3

मैं setErrors()एक टेम्पलेट फॉर्म में ngModelChange हैंडलर के अंदर कॉल करने का प्रयास कर रहा था । यह तब तक काम नहीं आया जब तक मैंने एक टिक के साथ इंतजार नहीं किया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

SetTimeOuts का उपयोग करने के साथ क्या हो रहा है? मैंने इसे देखा है और साथ ही यह प्रतीत होता है कि नियंत्रण तुरंत खुद को अपडेट नहीं करते हैं। यह इस सीमा के आसपास काम करने के लिए बहुत सारे हैकी कोड पेश करता है।

— जेक शेक्सवर्थ

धन्यवाद। मुझे पता था, setErrorsलेकिन जब तक मैंने इस्तेमाल नहीं किया, तब तक काम नहीं कियाsetTimeout

— संप्रग

Answer 4

सामग्री 2 के नए संस्करण में जिसका नियंत्रण नाम मैट प्रीफिक्स सेट के साथ शुरू होता है () काम नहीं करता है, इसके बजाय जुइला के उत्तर को इसमें बदला जा सकता है:

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

यह "हैकी" हो सकता है, लेकिन मुझे यह पसंद है क्योंकि आपको कोणीय सामग्री इनपुट त्रुटियों के साथ काम करने के लिए एक कस्टम ErrorStateMatcher सेट करने की आवश्यकता नहीं है!

— डेविड मेलिन

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

आप भी देख सकते हैं दृश्यमान 'प्रकार' को NgForm में निम्नानुसार:

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

त्रुटियों को शून्य करने के लिए सेट करना UI पर त्रुटियों को दूर करेगा:

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;

Answer 9

इकाई परीक्षण के लिए:

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