Div sollte versteckt sein, ist aber nicht

Question

Ich versuche, ein Login-Formular zu machen, aber ich habe einige Probleme mit Fehlermeldungen.

Ich möchte das 2. Div ausgeblendet werden, wenn das Formular nicht übermittelt wird, oder wenn das Formular übergeben wird UND das Passwort gültig ist.

Die html unten nicht funktionieren:

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

Die zweite div versteckt wird, wenn die Seite zum ersten Mal geladen wird, aber wenn ich ein gültiges Kennwort eingeben und drücken Sie den Absenden-Button, wird es nicht mehr verborgen. Was mache ich falsch?

Answer 1

Sie verwenden html input Tag ohne FormGroup. Es hat also keine valid Eigenschaft. Versuchen Sie stattdessen, nach value zu suchen.

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

HINWEIS: Wie !password.errors.required von @Jesper vorgeschlagen wird auch funktionieren.

Oder wenn Sie möchten, auf Gültigkeit zu überprüfen, haben eine Funktion in der Komponente, die auf ihre Gültigkeit überprüft und

In Komponente in [hidden] Attribut nennen:

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

Das [hidden] Attribut:

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