Angular2 양식 유효성 검사 오류 메시지

Question

전체적으로 각도와 JavaScript를 처음 사용하여 Materialize 라이브러리 (데이터 오류 특성)를 사용하여 사용자 입력이 잘못되었을 때 메시지를 추가하려고합니다. 따라서 내 html 구성 요소는 다음과 같습니다.

  <input 
        type="text" 
        id="username" 
        formControlName="username" 
        [class.valid]="username?.valid && username.dirty" 
        [class.invalid]="!username?.valid && username.dirty && !username.pending" 
      > 
      <label for="username" 
        data-error="ERROR_MESSAGE" // <-- this is what I need to work 
      >Username</label> 

오류에 따라 데이터 오류 속성을 변경하고 싶습니다. 현재 오류가있을 때마다 "ERROR_MESSAGE"를 인쇄합니다. 나는 함수를 작성하고이 같은 [attr.data 오류]로 바인딩 시도 :

displayUsernameErrorMessage() { 
    let message = ''; 
    let usernameError = this.username.errors; 
    if(usernameError.pattern){ 
     message = "Invalid Username" 
     console.log(usernameError); 
    } 
    else { 
     return null; 
    } 
} 

나는이와 정말 나쁜 일을하고 있다고 생각, 10 콘솔에서 시간과 그것의 같은 기능 로그 가난한 해결책. 그것이 더 잘 작동하도록하는 방법에 대한 아이디어는 대단히 감사합니다!

EDIT 1 : 추가 정보는 오류에 따라 다른 메시지를 표시하고 싶습니다. Validator.pattern에서 오류가 발생하는 경우 - "유효하지 않은 사용자 이름"또는 Validators.required의 메시지 인 경우 - "사용자 이름을 입력하십시오."등과 같은 메시지가 필요합니다. 나는 그것을하고있어 방법

Answer 1

는 (당신의 Exemple에 적응) :

<form name="nameForm" [formGroup]="nameForm"> 
<fieldset> 
     <label for="username">Username</label> 
     <input 
      required 
      id="username" 
      formControlName="username" 
     > 
     <span 
      class="text-danger" 
      [hidden]="nameForm.controls.name.valid || itemForm.controls.name.pristine" 
     > 
      <small>{{'Please enter your name'}}</small> 
     </span> 
     </fieldset> 
</form> 

당신의 TS 파일에서 :

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

export class InputComponent { 
    public nameForm: FormGroup; 
    constructor(private formBuilder: FormBuilder) { 

    this.nameForm = this.formBuilder.group({ 
    username: new FormControl('', Validators.required), 
    }); 
    } 
//... codes.. 
} 

당신이 당신의 CSS (또는 대안으로 text-danger을 사용자 정의 할 수 있습니다 경우) 파일

Answer 2

나는 이와 비슷한 것을 할 필요가있어서 <label> 요소에 배치 할 수있는 지시문을 작성했다.

당신의 예에서 그 결과는 다음과 같습니다

<label for="username" errorMessageForFormControl>Username</label> 
<input required id="username" formControlName="username"> 

나는 지시어는 for 속성의 값을 살펴보고 그에서 컨트롤을 발견, 그래서 두 번 컨트롤 이름을 반복하지 않도록하고 싶었다. FormControls와 <input> 필드 ID가 일치하지 않으면 직접 설정할 수 있습니다.

<label for="somethingDifferent" errorMessageForFormControl="username">Username</label> 
<input required id="somethingDifferent" formControlName="username"> 

이 지침은 다음과 같이보고 결국 :

import { Directive, Host, HostBinding, Input, Optional, OnInit, SkipSelf } from '@angular/core'; 
import { AbstractControl, ControlContainer } from '@angular/forms'; 

@Directive({ 
    selector: '[errorMessageForFormControl]' 
}) 
export class errorMessageDirective implements OnInit { 
    @HostBinding('class.validation-error') validationErrorCssClass = false; 
    @HostBinding('attr.data-error') errorMessage: string = null; 

    @Input() public errorMessageForFormControl: string; 
    @Input() public for: string; 

    private ctrl: AbstractControl = null; 

    constructor(
     @Optional() @Host() @SkipSelf() 
     private controlContainer: ControlContainer 
    ) { } 

    public ngOnInit(): void { 
     if (!this.controlContainer) { 
      return; 
     } 

     const formControlName = this.errorMessageForFormControl || this.for; 
     if (formControlName) { 
      this.ctrl = this.controlContainer.control.get(formControlName); 
     } 

     if (this.ctrl) { 
      this.ctrl.statusChanges.subscribe(statusText => { 

       if (statusText === 'INVALID') { 
        // invalid 
        const errors = this.ctrl.errors; 
        if (errors) { 
         const errKey = Object.keys(errors)[0]; 
         const errVal = errors[errKey]; 
         this.errorMessage = errVal === true ? errKey : errVal; 
        } else { 
         this.errorMessage = 'validation failed'; 
        } 

        this.validationErrorCssClass = true; 
       } else { 
        // valid 
        this.errorMessage = null; 
        this.validationErrorCssClass = false; 
       } 
      }); 
     } 
    } 
} 

을 그리고 당신은 내가 그런 생각을했다

[data-error].validation-error::after { 
    color:red; 
    content: attr(data-error); 
    opacity: 0.8; 
    font-weight: bold; 
    font-style: italic; 
    font-size: 0.75em; 
    margin-right: 0.25em; 
    z-index: 99; 

    float: right; 
    transform: translateY(85%); 
}