Question

我有一些输入

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

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

表单验证禁用按钮

1 个答案: