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

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

---

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

주형 :

<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 ()로 시작하는 재료 2의 새 버전에서는 Juila의 답변을 다음과 같이 설명 수 있습니다.

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

---

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

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

---

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

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

---

하지만 늦었지만 다음과 같은 해결책이 효과가.

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

---

내 양식에서 다른 필드를 확인한 경우 필드를 유효하지 않은 표시해야합니다. 버전 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 (선택 취소)로 설정되어 있으면 드롭 다운에서 필수 유효성 검사기를 지우고 원래 상태로 재설정합니다.

또한-모니터링 필드 변경을 구독 취소하는 것을 잊지 마십시오!

---

단위 테스트의 경우 :

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

참고 URL : https://stackoverflow.com/questions/43553544/how-can-i-manually-set-an-angular-form-field-as-invalid