Bagaimana saya bisa secara manual mengatur bidang formulir Sudut sebagai tidak valid?

Saya sedang mengerjakan formulir login dan jika pengguna memasukkan kredensial tidak valid kami ingin menandai bidang email dan kata sandi sebagai tidak valid dan menampilkan pesan yang mengatakan login gagal. Bagaimana cara menetapkan bidang ini menjadi tidak valid dari panggilan balik yang dapat diamati?

Templat:

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

Metode login:

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

Selain mengatur input flag yang tidak benar ke true Saya sudah mencoba mengatur email.validflag ke false, dan mengatur loginForm.invalidke true juga. Tidak satu pun dari ini menyebabkan input untuk menampilkan keadaan tidak valid mereka.

dalam komponen:

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

dan dalam HTML:

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

Menambah jawaban Julia Passynkova

Untuk mengatur kesalahan validasi dalam komponen:

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

Untuk menghapus kesalahan validasi dalam komponen:

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

Berhati-hatilah dengan menghapus kesalahan menggunakan nullkarena ini akan menimpa semua kesalahan. Jika Anda ingin menyimpan beberapa di sekitar Anda mungkin harus memeriksa keberadaan kesalahan lain terlebih dahulu:

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

Saya mencoba untuk memanggil setErrors()di dalam handler ngModelChange dalam formulir template. Itu tidak bekerja sampai saya menunggu satu tanda centang dengan setTimeout():

templat:

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

komponen:

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

Gotcha seperti ini membuat saya lebih suka bentuk reaktif.

Dalam versi baru materi 2 yang nama kontrolnya dimulai dengan awalan mat setErrors () tidak berfungsi, sebagai gantinya jawaban Juila dapat diubah menjadi:

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

Berikut ini contoh yang berfungsi:

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

Dalam formulir Reaktif saya, saya perlu menandai bidang sebagai tidak valid jika bidang lain diperiksa. Dalam ng versi 7 saya melakukan hal berikut:

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

Jadi di atas, ketika saya mencentang kotak itu mengatur dropdown seperti yang diperlukan dan menandainya sebagai kotor. Jika Anda tidak menandainya, maka tidak akan salah (salah) sampai Anda mencoba mengirim formulir atau berinteraksi dengannya.

Jika kotak centang disetel ke false (tidak dicentang) maka kami menghapus validator yang diperlukan pada dropdown dan meresetnya ke keadaan murni.

Juga - ingatlah untuk berhenti berlangganan dari perubahan bidang pemantauan!

Anda juga dapat mengubah 'type' viewChild ke NgForm seperti pada:

@ViewChild('loginForm') loginForm: NgForm;

Dan kemudian referensi kontrol Anda dengan cara yang sama seperti yang disebutkan oleh @Julia:

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

Mengatur Kesalahan ke nol akan menghapus kesalahan pada UI:

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

Meskipun solusi yang terlambat tetapi berikut berhasil dari saya.

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

Untuk unit test:

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