Angularjs 如何禁用提交按钮，直到所有字段都填写在表单中？

我有一个带有一组字段的表单。我的问题是，提交按钮最初是禁用的，但当任何一个字段变为有效或非空按钮被启用时。以下是我的源代码：

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

品名
需要产品名称

需要最终用户

谁是最终用户
[游戏玩家、工程师、通勤者、媒体、政府]
他们今天面临什么问题
需要解决问题

花这么多钱在。。。。。
这是什么产品
需要产品种类

[软件、MobileApp、JIRA插件]
你打算如何解决这个问题
需要问题解决方案

[个人自动流量信息的负载平衡]
你的竞争对手是谁
需要竞争对手

传统通勤解决方案
你如何区别于你的竞争对手
需要区分符

[自动、安全]
拯救
取消

如何确保在填写所有字段之前禁用“提交”按钮。

---

我尝试了几乎所有可用的解决方案，如设置所有必需的字段，将提交按钮设置为。/。但似乎没有任何效果。

你几乎做对了。要使用angular的表单验证，必须使用angular指令。例如，使用

ng required

而不是正常的

required

（虽然它可以工作，但您应该使用

ng required

以获得最佳实践）：

提交

---

看

你几乎做对了。要使用angular的表单验证，必须使用angular指令。例如，使用

ng required

而不是正常的

required

（虽然它可以工作，但您应该使用

ng required

以获得最佳实践）：

提交

---

参见

你所说的“不起作用”到底是什么意思？因为这应该是解决方案。如果我在我的JSFIDLE中复制粘贴你的html，它也会起作用：是的，这就是问题所在，我无法正确地做到这一点。这是我的小提琴这是因为其他错误，你没有定义模块和控制器，所以angular无法初始化。如果你删除了那些有效的：或者创建了模块和控制器，它也有效：你说的“不工作”到底是什么意思？因为这应该是解决方案。如果我在我的JSFIDLE中复制粘贴你的html，它也会起作用：是的，这就是问题所在，我无法正确地做到这一点。这是我的小提琴这是因为其他错误，你没有定义模块和控制器，所以angular无法初始化。如果您删除了有效的模块和控制器：或创建了模块和控制器，则它也有效：

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