Блог

Я создал следующую простую форму в проекте 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>
  

Таким образом, в основном из-за обязательных полей, кнопка «ДАЛЕЕ» должна быть отключена в первую очередь. Но она остается включенной навсегда.
Пожалуйста, дайте мне знать, где я делаю ошибку.?