Question

我使用angular-material构建我的应用程序登录表单，并尝试使用它与其页面上的示例略有不同。我只是想让所有字段只对我大喊大叫，如果用户试图提交而不填写字段。也许也禁用按钮？无论如何，如果用户只填写一个字段并按下输入，我希望它显示＆＃34;这是必需的＆＃34;。现在它只是一直显示它，直到你填写

以下是我的内容：https://jsfiddle.net/5b1tsm2a/6/

我正在尝试他们的示例页面中的代码 -

  <form ng-submit="authenticate()" name="loginForm">
        <md-input-container>
            <label>Username</label>
            <input name="name" reauired ng-model="loginInfo.username">
            <div ng-messages="projectForm.description.$error">
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>

        <md-input-container>
            <label>Password</label>
            <input name="password" reauired type="password" ng-model="loginInfo.password">
            <div ng-messages="projectForm.description.$error">
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>

        <md-button ng-click="authenticate()" class="md-primary btn btn-primary">Login</md-button>
    </form>

所以我使用下面的ng-messages所需的逻辑。我只想表明他们是否试图提交而不填写任何内容。谢谢！

Answer 1

更新您的代码，如下所示：

<form ng-submit="authenticate()" name="loginForm">
        <md-input-container>
            <label>Username</label>
            <input name="username" ng-model="loginInfo.username" required/>
            <div ng-messages="loginForm.username.$error" ng-if='loginForm.username.$dirty'>
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>

        <md-input-container>
            <label>Password</label>
            <input name="password" type="password" ng-model="loginInfo.password" required/>
            <div ng-messages="loginForm.password.$error" ng-if='loginForm.password.$dirty'>
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>
        <md-button type="submit" class="md-primary btn btn-primary">Login</md-button>
 </form>

提交尝试后，角度，材料形式仅表示字段

1 个答案: