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

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

로그인 양식을 작성하고 있으며 사용자가 잘못된 자격 증명을 입력하면 전자 메일 및 암호 필드를 모두 잘못된 것으로 표시하고 로그인 실패 메시지를 표시합니다.관찰 가능한 콜백에서 이러한 필드를 비활성화하려면 어떻게 해야 합니까?

템플릿:

<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.validfalse로 플래그 지정 및 설정loginForm.invalid사실도 그렇습니다.이 중 어느 것도 입력이 잘못된 상태를 표시하지 않도록 합니다.

구성 요소:

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>

줄리아 패신코바의 대답에 추가.

구성 요소에서 유효성 검사 오류를 설정하는 방법

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

구성 요소에서 유효성 검사 오류를 설정 취소하는 방법

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

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

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

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

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

전화를 하려고 했어.setErrors()템플릿 양식의 angModelChange 핸들러 내부.그것은 제가 한 티크를 기다릴 때까지 작동하지 않았습니다.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);
  }
}

이런 고트카들은 제가 반응형을 선호하게 만듭니다.

내 대응 양식에서 다른 필드를 선택한 경우 필드를 유효하지 않은 것으로 표시해야 했습니다.Ng version 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(선택 취소)로 설정된 경우 드롭다운에서 필수 검증기를 지우고 원래 상태로 재설정합니다.

또한 - 필드 변경 모니터링에서 등록을 취소해야 합니다.

다음과 같이 Child '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);

작동하는 예는 다음과 같습니다.

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;

각도 설명서의 이 샘플은 도움이 될 수 있습니다. <입력 유형="text" id="name" name="name" class="form-control"

      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel">

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert">

  <div *ngIf="name.errors?.['required']">
    Name is required.
  </div>
  <div *ngIf="name.errors?.['minlength']">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors?.['forbiddenName']">
    Name cannot be Bob.
  </div>

</div>

단위 테스트의 경우:

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

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