使用angularjs watchCollection隐藏错误消息

时间:2015-07-09 13:32:23

标签: javascript angularjs forms

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

src/scheduler.meta/Makefile.am:15: warning: source file 'base/MiscHelpers.cpp' is in a subdirectory,
src/scheduler.meta/Makefile.am:15: but option 'subdir-objects' is disabled

用户应该只能填写其中一个表格,而另一个表格应该被禁用。我正在使用ngdisabled来实现这一目标。 另外,我使用$ scope。$ watchCollection来监视输入字段,这样如果用户输入的值至少有一个 其中一个个人信息表格的输入字段然后决定清除 他们输入了什么,并填写公司信息表。以单个形式显示的错误消息应该已重置为pristine 基于以下代码:

<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" name="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" required>
                        </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>

到目前为止我所做的部分工作,$ scope中的第一个if条件语句块。$ watchCollection应该设置表单 如果公司名称或公司编号具有值,则first_name,last_name,middle_name和salutation的字段为pristine。 当我在company_name输入字段中输入值时,任何在单个表单中包含错误消息的输入字段都被清除。 但是,如果我首先在company_number输入字段中输入值,则不会清除任何错误消息。 第二个if语句块甚至可能都不起作用。我能做错什么?提前谢谢。

0 个答案:

没有答案