사업부가 숨겨져 있어야하지만 그렇지 않습니다.

Question

로그인 양식을 만들려고하는데 오류 메시지와 관련된 문제가 있습니다.

양식이 제출되지 않거나 양식이 제출되고 암호가 유효한 경우 두 번째 div를 숨기고 싶습니다.

<div class="form-input"> 
    <input #password type="password" name="password" 
    placeholder="Enter Password" required ngModel> 

    <div class="alert alert-danger" [hidden]="!form.submitted || (form.submitted && password.valid)"> 
     Please enter your password. 
    </div> 
</div> 

제 2 사업부는 페이지가 처음로드 될 때 숨겨진, 그러나 나는 올바른 암호를 입력하고 전송 버튼을 누르면, 그것은 더 이상 숨겨져 :

아래의 HTML이 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

FormGroup없이 input 태그를 사용하고 있습니다. 따라서 valid 속성이 없습니다. 대신 value을 확인하십시오.

[hidden]="!form.submitted || (form.submitted && password.value)" 

참고 : @Jesper !password.errors.required에 의해 제안도 작동합니다.

아니면 유효성 확인 유효성을 검사하는 구성 요소의 기능을 가지고 구성 요소에서 [hidden] 속성

에 전화를 걸 경우 :

isPasswordValid():boolean{ 
//check this.password validity and return boolean. 
} 

[hidden] 속성 :

[hidden]="!form.submitted || (form.submitted && isPasswordValid())"