使用angularjs

时间:2015-07-09 03:16:07

标签: javascript angularjs forms

我在一个单独的手风琴中有两种形式。第一种形式是个人信息表,另一种是公司信息表。这是代码

<div class="col-md-10 col-sm-12 col-md-offset-1">

<section class="basic-info">
    <div class="heading text-center">
        <h1>Basic Information</h1>
        <p>Register as an individual OR as a company</p>
    </div>

    <div class="separator"></div>

    <div class="custom-accordion">
        <accordion close-others="oneAtATime">

            <accordion-group is-open="status.isFirstOpen">
                <accordion-heading>
                    Individual Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.isFirstOpen, 'fa fa-angle-right': !status.isFirstOpen}"></i>
                </accordion-heading>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.first_name" name="first_name" placeholder="First Name" required>
                        </div>
                        <div ng-messages="SignUpForm.first_name.$error" ng-if="SignUpForm.first_name.$dirty">
                        <div ng-message="required">
                            <span>Please enter first name</span>
                        </div>
                    </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.last_name" name="last_name" placeholder="Last Name" required>
                        </div>
                        <div ng-messages="SignUpForm.last_name.$error" ng-if="SignUpForm.last_name.$dirty">
                        <div ng-message="required">
                           <span>Please enter your last name</span>
                        </div>
                   </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Salutation</label>
                            <select class="form-control input-md" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" ng-model="user.salutation" required>
                                <option value="">Select Salutation</option>
                                <option value="Mr">Mr</option>
                                <option value="Mrs">Mrs</option>
                            </select>
                        </div>
                        <div ng-messages="SignUpForm.salutation.$error" ng-if="SignUpForm.salutation.$dirty">
                        <div ng-message="required">
                           <span>Please select a salutation</span>
                        </div>
                  </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Middle Name</label>
                            <input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" class="form-control input-md" ng-model="user.middle_name" name="middle_name" placeholder="Middle Name" >
                        </div>
                        <div ng-messages="SignUpForm.middle_name.$error" ng-if="SignUpForm.middle_name.$dirty">
                        <div ng-message="required">
                           <span>Please enter your middle name</span>
                        </div>
                  </div>
                    </div>
                </div>
            </accordion-group>

            <accordion-group is-open="status.open">
                <accordion-heading>
                    Company Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.open, 'fa fa-angle-right': !status.open}"></i>
                </accordion-heading> 

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" ng-click"check()" class="form-control input-md" ng-model="user.company_name" name="company_name" placeholder="Company Name" required 
                            ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty ||  SignUpForm.first_name.$dirty|| SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
                        </div>
                        <div ng-messages="SignUpForm.company_name.$error" ng-if="SignUpForm.company_name.$dirty">
                        <div ng-message="required" >
                           <span>Please enter a company name</span>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Company Number</label>
                            <input type="text" class="form-control input-md" ng-model="user.company_number" name="company_number" placeholder="Company Number" required ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty ||  SignUpForm.first_name.$dirty || SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)"> 
                        </div>
                    </div>
                    <div ng-messages="SignUpForm.company_number.$error" ng-if="SignUpForm.company_number.$dirty">
                        <div ng-message="required">
                           <span>Please enter company number</span>
                        </div>
                  </div>
                </div>

            </accordion-group>
        </accordion>
    </div>

    <div class="navigation-btns text-center">
        <a ui-sref="form.accountInfo" class="btn btn-info back-btn" ng-click="update(15)">Back</a>


        <a ui-sref="form.address" class="btn btn-info continue-btn" ng-click="update(31)">Save and Continue</a>
    </div>
    <div class="clearfix"></div>

    <div class="separator"></div>
</section>

用户应该只能填写其中一个表格,而另一个表格应该被禁用。我正在使用ngdisabled来完成ojbective; 但是,如果用户在其中一个个人信息表格的至少一个输入字段中输入值,然后决定清除他们输入的内容并填写公司信息表格,则验证消息错误将以个别形式显示。所以我的问题是,如何摆脱输入错误信息?

1 个答案:

答案 0 :(得分:1)

在没有看到完整代码的情况下很难确定,但是我猜测正在显示验证是因为ng-dirty状态,一旦表单输入值改变就会设置,但是当表单输入是清零。

要删除ng-dirty状态,请使用:

$scope.yourform.$setPristine() 

有关详细信息,请参阅https://docs.angularjs.org/api/ng/type/form.FormControllerhttp://www.angularjshub.com/examples/forms/formreset/表单重置示例