部門は非表示にする必要がありますが

Question

ログインフォームを作成しようとしていますが、エラーメッセージに問題があります。

フォームが送信されない場合、またはフォームが送信されてパスワードが有効な場合、2番目のdivを非表示にします。以下

HTMLが動作していない：

<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> 

ページが最初にロードされたときに第二divが隠されていないが、私は有効なパスワードを入力し、送信ボタンを押した場合、それはもはや隠されています。私は間違って何をしていますか？

Answer 1

FormGroupを含まないhtml 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())"