表单显示有效,即使不满足要求的验证,“下一步”按钮也不会禁用

时间:2019-04-03 10:38:00

标签: angular html5 forms form-submit

我已经在Angular项目中创建了以下简单形式。

<form id="basicInfoForm" #basicInfoForm="ngForm">
          <div class="scrollableForm">
            <!-- Add Store-->
            <div class="row mp">
              <div class="col-xs-12 col-sm-12 col-ms-12 col-lg-12">
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                  <p class="fieldtitle">Store Name
                    <span class="requiredAsterix">*</span>
                  </p>
                  <input autocomplete="off" type="text" name="location" class="form-control form-group"
                    [(ngModel)]="basicFormInfo.storeName" [ngModelOptions]="{standalone: true}"
                    placeholder="Enter Store Name" required>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                  <p class="fieldtitle">Location
                    <span class="requiredAsterix">*</span>
                  </p>
                  <input autocomplete="off" type="text" name="location" class="form-control form-group"
                    [(ngModel)]="basicFormInfo.location" [ngModelOptions]="{standalone: true}"
                    placeholder="Enter Location" required>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                  <p class="fieldtitle">Floor Map
                    <span class="requiredAsterix"></span>
                  </p>
                  <input autocomplete="off" type="file" name="location" id="filePicker" class="form-control form-group"
                    placeholder="Select Floor Map" (change)="handleFileSelect($event)" required>
                </div>

              </div>
            </div>
            <br>
          </div>
          <!-- <hr class="hrColor"> -->
          <div class="row mp">
            <div class="col-xs-12 col-sm-12 col-ms-12 col-lg-12">
              <div class="ButtonsDiv">
                <button class="btn btn-round formButton btn_green" (click)="cancelFun()">CANCEL</button>
                <!-- <button class="btn btn-round formButton btn_green" [disabled]="!basicInfoForm.valid" (click)="selectTab(2,'baiscForm',{form:basicInfoForm})">NEXT</button> -->
                <button type="submit" class="btn btn-round formButton btn_success btn_green"
                  [disabled]="!basicInfoForm.valid" (click)="submit({form:basicInfoForm})">NEXT</button>
              </div>
            </div>
          </div>
        </form>

因此,基本上由于必填字段,应先禁用“下一个”按钮。但是它永远保持启用状态。 请让我知道我在哪里做错了??

0 个答案:

没有答案