Question

我有一个包含一组字段的表单。我的问题是，提交按钮最初被禁用，但任何一个字段有效或非空按钮被启用的那一刻。这是我的源代码：

<form class="aui newDiscoveryForm" name="newDiscoveryForm" ng-submit="createNewDiscovery(user)" novalidate>

    <fieldset class="group">

        <div class="field-group">
            <label class="label">Product Name</label>
            <input class="text" type="text" name="input1" ng-model="user.productName" value="" id="productName" required/>
            <p ng-show="newDiscoveryForm.input1.$invalid && !newDiscoveryForm.input1.$pristine" style="color: #880000">Product name is required.</p>
            <div class="error"></div>
            <span class="result_product" style="color: #880000"></span>
        </div>

        <div class="field-group">
            <input class="text" type="text" name="input2" ng-model="user.endUsers" value="" required/>
            <p ng-show="newDiscoveryForm.input2.$invalid && !newDiscoveryForm.input2.$pristine" style="color: #880000">EndUsers required.</p>
            <label class="label">Who are end users</label>
            <div class="description">[Gamers, Engineers, Commuters, Media, Goverment]</div>
        </div>


        <div class="field-group">
            <label for="licenseKey">What Problem Are They Facing Today</label>
            <textarea class="textarea" rows="4" cols="10" name="input3" ng-model="user.problemsArea" id="problemsarea" value="" required></textarea>
            <p ng-show="newDiscoveryForm.input3.$invalid && !newDiscoveryForm.input3.$pristine" >ProblemsArea required.</p>
            <div class="description">Spend So much in .....</div>
        </div>


        <div class="field-group">

            <label class="label">What kind of product is this</label>
            <input class="text" type="text" name="input4" ng-model="user.productKind" id="productkind" value="" required/>
            <p ng-show="newDiscoveryForm.input4.$invalid && !newDiscoveryForm.input4.$pristine" >ProductKind required.</p>
            <div class="description">[Software, MobileApp, JIRA-Plugin]</div>
        </div>


        <div class="field-group">
            <label for="d-lname">How do you plan to solve the problem</label>
            <input class="text long-field" type="text" id="problemSoln" name="input5" ng-model="user.problemSoln" value="" required />
            <p ng-show="newDiscoveryForm.input5.$invalid && !newDiscoveryForm.input5.$pristine" >ProblemSolution required.</p>
            <div class="error"></div>
            <div class="description">[Load Balancing of Personal, Automated Traffic Info]</div>
        </div>


        <div class="field-group">
            <label for="d-lname">Who are your competitors</label>
            <input class="text long-field" type="text" id="competitors" name="input6" ng-model="user.competitors" value="" required/>
            <p ng-show="newDiscoveryForm.input6.$invalid && !newDiscoveryForm.input6.$pristine" >Competitors required.</p>
            <div class="error"></div>
            <div class="description">Traditional Commuting Solution</div>
        </div>

        <div class="field-group">
            <label for="d-lname">How do you differntiate from your competitors</label>
            <input class="text long-field" type="text" id="differentiator" name="input7" ng-model="user.differentiator" value="" required/>
            <p ng-show="newDiscoveryForm.input7.$invalid && !newDiscoveryForm.input7.$pristine" >Differentiator required.</p>
            <div class="error"></div>
            <div class="description">[Automated, Secure]</div>
        </div>

    </fieldset>

        <div class="buttons-container">
            <div class="buttons">

                <button class="aui-button aui-button-primary ap-dialog-submit" value="Submit" type="submit"
                         id="save-button" ng-click = "createNewDiscovery(user)" ng-disabled="newDiscoveryForm.$invalid">Save</button>
                <button id="close-button" type="button" class="aui-button aui-button-link ap-dialog-cancel" ng-click = "cancelClick()">Cancel</button>
            </div>
        </div>
</form>

如何确保禁用提交按钮，直到填写所有字段。我尝试了几乎所有可用的解决方案，如需要所有字段，将提交按钮设为./。但似乎没有任何工作。

Answer 1

你几乎做得对。要使用angular的表单验证，必须使用angular指令。例如，使用ng-required代替普通required（虽然它可以使用，但您应该使用ng-required进行最佳实践）：

<form name="newDiscoveryForm">
    <input type="text" name="someName"
           ng-model="someModel" 
           ng-required="true" /> <!-- use ng-required -->
    <!-- other inputs -->

    <!-- $invalid will evaluate to true if the `ng-required` are not valid -->
    <button type="submit" 
            ng-disabled="newDiscoveryForm.$invalid">
        Submit!
    </button>
</form>

请参阅this JSFIDDLE

如何禁用提交按钮，直到填写表格中的所有字段？

1 个答案: