【问题标题】:How to stop disabling the submit button in Angular Js如何停止禁用Angular Js中的提交按钮
【发布时间】:2017-05-05 23:10:01
【问题描述】:

我有一个表单,我在其中打印值,基本上它是一个更新表单,情况是用户不能在更新中发送空字段。但问题是我有两个字段,它们实际上是 passwordconfirm-password 我没有得到它们的值,所以它们的搜索框将是 empty

案例- 1

现在我如何发送除密码以外的所有值并在更新表单中确认密码,如果除了passwordconfirm password 之外的任何内容为空,则抛出错误

案例 - 2

如果用户在password 的搜索框中输入一些东西然后擦它并且表单的所有字段都去但除了密码和确认密码之外,如何做到这一点。

简而言之,我想发送除passwordconfirm password 之外的所有已填写字段,无论如何,如果已填写,也应发布。

我正在分享我的完整表格,我确实申请了验证,但问题是因为 passwordconfirm password 的空框我的提交按钮被禁用。

<form class="col-md-8" name="updateprofileForm" ng-submit="update_profile()" novalidate>
                            <div class="form-group">
                                <p ng-show="updateprofileForm.username.$invalid && !updateprofileForm.username.$pristine" class="help-block color-ferozimp">Enter a valid Username</p>
                                <label for="text">Full Name:</label>
                                <input class="form-control" name="username" id="name" type="text" ng-model="profileData.username" ng-maxlength="40" required>
                            </div>
                            <div class="form-group">
                                <p ng-show="updateprofileForm.email.$invalid && !updateprofileForm.email.$pristine" class="help-block color-ferozimp">Enter a valid email</p>
                                <label for="text">Email:</label>
                                <input class="form-control" name="email" id="email" type="email" ng-model="profileData.email" ng-disabled="true" required>
                            </div>
                            <div class="form-group">
                                <p ng-show="updateprofileForm.password.$invalid && !updateprofileForm.password.$pristine" class="help-block color-ferozimp">Enter a 10 character Password</p>
                                <label for="pwd">Password:</label>
                                <input class="form-control" id="pwd" type="password" ng-model="profileData.password" name="password" ng-minlength="10" ng-maxlength="40" required>
                            </div>
                            <div class="form-group">
                                <p ng-show="updateprofileForm.confirmpassword.$invalid && !updateprofileForm.confirmpassword.$pristine" class="help-block color-ferozimp">Enter confirm Password</p>
                                <p ng-show="profileData.password !== profileData.confirmpassword && profileData.confirmpassword" class="help-block color-ferozimp">Password does not match</p>
                                <label for="pwd">Confirm Password:</label>
                                <input class="form-control" id="pwd" type="password" ng-model="profileData.confirmpassword" name="confirmpassword" ng-minlength="10" ng-maxlength="40" >
                            </div>
                            <div class="form-group">
                                <p ng-show="updateprofileForm.phone_no.$invalid && !updateprofileForm.phone_no.$pristine" class="help-block color-ferozimp">Enter Valid Phone Number</p>
                                <label for="pwd">Mobile No:</label>
                                <input class="form-control" id="pwd" type="text" ng-model="profileData.phone_no" name="phone_no" ng-minlength="7" ng-maxlength="40" required>
                            </div>
                            <div class="form-group  mg-bseven">
                                <p ng-show="updateprofileForm.country_id.$invalid && !updateprofileForm.country_id.$pristine" class="help-block color-ferozimp">Choose a Country Please </p>
                                <label for="country">Country:</label>
                                <select class="col-md-12 col-sm-12 col-xs-12 register" name="country_id" ng-change="cities(profileData.country_id)" ng-model="profileData.country_id" ng-options="country.id as country.name for country in view_profile" required>
                                </select>
                            </div>
                            <div class="form-group mg-bseven">
                                <p ng-show="updateprofileForm.city_id.$invalid && updateprofileForm.city_id.$dirty" class="help-block color-ferozimp">Choose a City Please</p>
                                <label for="city">City:</label>
                                <select class="col-md-12 col-sm-12 col-xs-12 register" name="city_id" ng-disabled="!profileData.country_id || !view_profile" ng-model="profileData.city_id" ng-options="city.id as city.name for city in cities_data" required>
                                </select>
                            </div>
                            <div class="form-group mb-seven" ng-init="check = 0">
                                <button type="button" ngf-select="uploadFiles($file, $invalidFiles,check)"
                                        accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
                                    Select File</button>
                                <br><br>
                                File:
                                <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
                                    <span class="progress" ng-show="f.progress >= 0">
                                        <div style="width:{{f.progress}}%"  
                                             ng-bind="f.progress + '%'" ></div>
                                    </span>
                                </div>     
                                {{errorMsg}}
                            </div>
                            <div class="aa-single-submit mg-bseven">
                                <button class="btn btn-primary" type="submit" value="Update profile"  ng-disabled="updateprofileForm.$invalid || fileselected" >Update Profile</button>                  
                            </div>
                        </form>

【问题讨论】:

    标签: angularjs forms validation submit


    【解决方案1】:

    从以下行中删除required

    <input class="form-control" id="pwd" type="password" ng-model="profileData.password" name="password" ng-minlength="10" ng-maxlength="40" required>
    

    【讨论】:

    • 现在如果我填写密码字段但不确认密码,它不会显示错误
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-12-19
    • 2013-03-05
    • 2019-01-20
    • 2015-11-10
    • 2018-09-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多