表单验证禁用按钮答案

【问题标题】：Form Validation disable button表单验证禁用按钮
【发布时间】：2017-09-04 10:01:22
【问题描述】：

我有一些意见

             <div class="data">
                  <underline-input id="name" name="name" [(ngModel)]='this.header.patient.givenName' required #name="ngModel" pattern="^([A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[,.]?[ ]?|[A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+['-]?){3,128}$"></underline-input>
              </div>
              <div *ngIf="name.invalid && (name.dirty || name.touched)" class="error-message">
                    <div *ngIf="name?.errors.required">
                        Field is required
                    </div>
                    <div *ngIf="name?.errors.pattern">

                    </div>
               </div>

当我点击输入并设置空按钮被禁用但在其他输入中

            <div class="data">
                <underline-input id="regon" [(ngModel)]="this.company.regon" name="regon" [ngModelOptions]="{standalone: true}" #regon="ngModel" required></underline-input>
            </div>
             <div *ngIf="regon.invalid && (regon.dirty || regon.touched)" class="error-message">
                <div *ngIf="regon?.errors.required">
                     Field is required
                </div> 
            </div>

当我点击输入时会显示错误消息，但我也可以点击按钮并发送表单？

我从表单中删除了一些代码并我留下了两个输入

    <form class="form-horizontal" (ngSubmit)="onSubmit(f)" #f="ngForm">
          <div class="section" id="pacient-data" ngModelGroup="pacientData" #pacientData="ngModelGroup">
              <div class="section-title">Pacient</div>
              <div class="row">
                  <div class="text">Name:</div>
                  <div class="data">
                      <underline-input id="name" name="name" [(ngModel)]='this.header.patient.givenName' required #name="ngModel" pattern="^([A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[,.]?[ ]?|[A-Za-z-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+['-]?){3,128}$"></underline-input>
                  </div>
   <div *ngIf="name.invalid && (name.dirty || name.touched)" class="error-message">
                    <div *ngIf="name?.errors.required">
                        Field is required
                    </div>
                    <div *ngIf="name?.errors.pattern">
                          Error
                    </div>
               </div>
            </div>
           <div class="section">
              <div class="section-title">Typ</div>
              <div id="kindData" ngModelGroup="kindData" #kindData="ngModelGroup">
                   <div class="row">
                    <div class="text">Regon:</div>
                    <div class="data">
                        <underline-input id="regon" [(ngModel)]="this.company.regon" name="regon" [ngModelOptions]="{standalone: true}" #regon="ngModel" required></underline-input>
                    </div>
                     <div *ngIf="regon.invalid && (regon.dirty || regon.touched)" class="error-message">
                        <div *ngIf="regon?.errors.required">
                             Field is requierd
                        </div> 
                    </div>    
                </div>      
            </div>

            <button type="submit" [disabled]="!f.form.valid" class="btn btn-primary btn_send">Zatwierdź</button>
        </div> 
      </form>

【问题讨论】：

你能把整个表格贴出来吗？按钮在哪里
@RahulSingh 整个表格很长
无法理解when i click in input error message is display but i also may click to button and send Form?这是什么意思
@WalterWhite 请创建一个最小示例。
@RahulSingh 这意味着我留下输入错误消息显示该字段是必需的，但我可能会发送我的无效表单，因为此按钮已启用

标签： javascript html angular validation

【解决方案1】：

希望你正在寻找这个

检查下面的例子。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
<body ng-app="">

<p>Try leaving the first input field blank:</p>

<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<br>
<span ng-show="myForm.myName.$invalid">The name is required.</span><br><br>
<button type="submit" ng-disabled="myForm.myName.$invalid">submit</button>
</p>

</form>



</body>
</html>

【讨论】：