Как запустить метод, когда заполнены два HTML-элемента?

#html #angular

#HTML #angular

Вопрос:

У меня есть этот HTML-код, в котором у меня есть datepicker элемент и select элемент. Прямо сейчас у меня есть кнопка, которая подключена к методу checkAvailability()

 <div class ="d-flex flex-row bd-highlight mb-3">

    <div class = "form-froup row">
             
            <label class = "col-sm-2 col-form-label">Choose a date</label>
            <div class="col-sm-10"> 
                <input (change)="setCheckToFalse()" type ="date" class="form-control"[(ngModel)] = "Datum"
                    placeholder="dd-mm-yyyy">
                    </div>    
                        </div>
</div>
    </div>

    <div class="form-group">
        <label for="exampleFormControlSelect1">Choose a location</label>
        <select (change)=Test() [(ngModel)]="selectedLocation" class="form-control" id="exampleFormControlSelect1">
          <option *ngFor='let location of locations' [value]='location.Locatie'>{{location.Locatie}}</option>
        </select>
      </div>
<button (click)="checkAvailability()" class="btn btn-primary">Check</button>
 

Это то, что происходит, когда я нажимаю на указанную кнопку:

 checkAvailability()
  {
    this.res2 = {
      Datum: this.Datum,
      Locatie: this.selectedLocation
    }
    if(this.Datum != "")
    {
      this.Auth.checkAvailability(this.res2).subscribe(data =>
        {
          this.someint = data,
          this.anotherint = this.Capaciteit - this.someint,
          this.ruiid = this.RuimteId,
          {}
          if(this.anotherint > 0){ this.check = true}
        })
    }
    else( console.log("Choose a date!") )

  }
 

Таким образом, в основном, когда пользователь выбирает дату из datepicker и выбирает местоположение, кнопка, подключенная к checkAvailability() методу, выполняет код внутри него. Я хочу, чтобы это происходило автоматически, без необходимости пользователю нажимать на кнопку.

Итак, я хочу, чтобы код checkAvailability() выполнялся автоматически каждый раз, когда пользователь выбирал дату И местоположение.

Ответ №1:

При изменении события проверьте, есть ли значение и для другого элемента управления. Предположим, что запущено событие изменения выбора даты, проверьте, присутствует ли значение выбора. если да, то запустите функцию, иначе ничего не делайте. То же самое для другого элемента управления.

Ответ №2:

Я вижу, что вы добавили методы для onchange . Просто вызывайте checkAvailability() inside setCheckToFalse() и Test() both , только когда this.Datum и this.selectedLocation оба имеют значения.