Açısal form alanını el ile geçersiz olarak nasıl ayarlayabilirim?

Bir giriş formu üzerinde çalışıyorum ve kullanıcı geçersiz kimlik bilgileri girerse, hem e-posta hem de parola alanlarını geçersiz olarak işaretlemek ve oturum açma işleminin başarısız olduğunu belirten bir ileti görüntülemek istiyoruz. Bu alanları gözlemlenebilir bir geri aramadan geçersiz olacak şekilde nasıl ayarlayabilirim?

Şablon:

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

Giriş yöntemi:

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

Girişler geçersiz bayrağı true olarak ayarlamaya ek olarak email.validbayrağı false olarak ayarlamayı ve loginForm.invalidde true olarak ayarlamayı denedim . Bunların hiçbiri girişlerin geçersiz durumlarını göstermesine neden olmaz.

bileşen içinde:

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

ve HTML olarak:

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

Julia Passynkova'nın cevabına ekleme

Bileşendeki doğrulama hatasını ayarlamak için:

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

Bileşendeki doğrulama hatasını ayarlamak için:

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

nullTüm hataların üzerine yazılacağından , hataları kullanarak dikkatli olmamaya dikkat edin . Etrafında biraz tutmak istiyorsanız, önce diğer hataların varlığını kontrol etmeniz gerekebilir:

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

Aramaya çalışıyordum setErrors()Şablon formunda bir ngModelChange işleyicisi içinde . Ben bir kene bekledi kadar işe yaramadı setTimeout():

şablonu:

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

bileşen:

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

Bunun gibi bana reaktif formları tercih ediyorlar.

Kontrol adının setErrors () mat önekiyle başlayan yeni malzeme 2 sürümünde, bunun yerine Juila'nın cevabı şu şekilde değiştirilebilir:

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

İşte bir örnek:

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

Reaktif formumda, başka bir alan işaretliyse bir alanı geçersiz olarak işaretlemem gerekiyordu. Sürüm 7'de aşağıdakileri yaptım:

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

Yukarıda, kutuyu işaretlediğimde açılır listeyi gerektiği gibi ayarlar ve kirli olarak işaretler. Böyle işaretlemezseniz, formu göndermeye veya onunla etkileşime geçmeye çalışana kadar geçersiz (hatalı) olmaz.

Onay kutusu yanlış (işaretlenmemiş) olarak ayarlanırsa, açılır menüde gerekli doğrulayıcıyı temizler ve bozulmamış bir duruma sıfırlarız.

Ayrıca - alan değişikliklerini izlemekten çıkmayı unutmayın!

ViewChild 'type' öğesini NgForm olarak şu şekilde değiştirebilirsiniz:

@ViewChild('loginForm') loginForm: NgForm;

Ve sonra kontrollerinize @Julia'nın bahsettiği şekilde bakın:

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

Hataların null olarak ayarlanması kullanıcı arayüzündeki hataları temizler:

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

Geç olmasına rağmen aşağıdaki çözüm işe yaradı beni.

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

Birim testi için:

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