Question

我正在尝试创建一个登录表单，但我在处理错误消息方面遇到了一些问题。

如果表单未提交，或者表单已提交且密码有效，我希望隐藏第二个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

您使用的是不带input的html FormGroup代码。所以它没有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())"

Div应隐藏但不是

1 个答案: