如何停止禁用Angular Js中的提交按钮

时间:2016-12-20 16:48:17

标签: angularjs forms validation submit

我有一个表单我在打印值基本上是一个更新表单,案例是用户无法在更新中发送空字段。但问题是我有两个字段,实际上是passwordconfirm-password我没有得到它们的值,因此它们的搜索框将为空

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

1 个答案:

答案 0 :(得分:0)

从以下行中删除required

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