각도 양식 필드를 유효하지 않은 것으로 수동으로 설정하려면 어떻게해야합니까?

로그인 양식을 작성 중이며 사용자가 유효하지 않은 자격 증명을 입력하면 이메일 및 비밀번호 필드를 모두 유효하지 않은 것으로 표시하고 로그인이 실패했다는 메시지를 표시하려고합니다. 이러한 필드를 관찰 가능한 콜백에서 유효하지 않게 설정하려면 어떻게해야합니까?

주형:

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

입력 무효 플래그를 true로 설정하는 것 외에도 email.valid플래그를 false로 설정하고 loginForm.invalid를 true로 설정 하려고 시도했습니다 . 이들 중 어느 것도 입력에 유효하지 않은 상태를 표시하지 않습니다.

구성 요소에서 :

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>

Julia Passynkova의 답변에 추가

구성 요소에서 유효성 검증 오류를 설정하려면 다음을 수행하십시오.

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

구성 요소에서 유효성 검증 오류를 설정 해제하려면 다음을 수행하십시오.

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

사용하여 오류를 설정 해제하면 null모든 오류를 덮어 쓰므로주의하십시오 . 주위를 유지하려면 먼저 다른 오류가 있는지 확인해야 할 수 있습니다.

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

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

이와 같은 문제는 반응 형을 선호합니다.

제어 이름이 매트 접두어로 setErrors ()로 시작하는 재료 2의 새 버전에서는 Juila의 답변을 다음과 같이 변경할 수 있습니다.

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

다음은 작동하는 예입니다.

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

내 반응성 양식에서 다른 필드를 확인한 경우 필드를 유효하지 않은 것으로 표시해야했습니다. ng 버전 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();
            }
        });

위의 상자를 선택하면 드롭 다운이 필요에 따라 설정되고 더티로 표시됩니다. 그렇게 표시하지 않으면 양식을 제출하거나 상호 작용할 때까지 유효하지 않습니다 (오류).

확인란이 false (체크되지 않은)로 설정되면 드롭 다운에서 필요한 유효성 검사기를 지우고 원래 상태로 다시 설정합니다.

또한-현장 변경 모니터링을 취소하십시오!

다음과 같이 viewChild 'type'을 NgForm으로 변경할 수도 있습니다.

@ViewChild('loginForm') loginForm: NgForm;

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

오류를 null로 설정하면 UI의 오류가 지워집니다.

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

비록 늦었지만 다음과 같은 해결책이 효과가있었습니다.

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

단위 테스트의 경우 :

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