Angular 2: запретить отправку, когда на странице требуется поле ввода, используя FormControl

Question

Я не использовал тег формы, чтобы обернуть ввод, где я хочу проверить этот ввод при нажатии кнопки

Я пытался использовать FormControl, у меня не было идеи прекратить отправку значения, оно отправлено.

Код, который я пробовал ниже

<div class="dead-line">
<span class="p-gap">To delivery in this period I want to recevive orders until 
    <a (click)="deadlineTime(i)" class="del-r">
    <input type="date" class="form-control hide-dt"  [formControl]="deadlineVal" required>
    {{i.dead_line_time}}</a>
    </span>
    </div>
  <button class="bt-save" (click)="submitHomeDelivery()">Save</button>

.ts

  deadlineVal: FormControl = new FormControl('',
           [Validators.required]);

submitHomeDelivery() {

    var self = this;
    console.log('self.deadlineVal',  self.deadlineVal);
---------------------
---------------------

Как я могу предотвратить отправку (принудительное добавление), Любая идея будет оценена

Answer 1

Просто добавьте [disabled]="!deadlineVal.valid" к вашей кнопке.

<button class="bt-save"
    (click)="submitHomeDelivery()"
    [disabled]="!deadlineVal.valid">Save</button>

Answer 2

Просто проверьте валидатор вот так.

submitHomeDelivery() { 
     if(this.deadlineVal.invalid) {
         return;
      }

     // do submit form here when form control is valid.

}

Answer 3

Просто добавьте некоторую функцию, которая возвращает True / False, например:

  <button class="bt-save" (click)="submitHomeDelivery()" [disabled]='checkDisabled()'>Save</button>

checkDisabled() {
     return !this.deadlineVal.valid
}

Вы также можете добавить выражение в ваш HTML, если ваши условия меньше, иначе вызовите функцию, как я предлагал.

Answer 4

Добавьте отключенный атрибут к вашей кнопке, отметив функцию и возвращаемое значение (True / False) в соответствии с вашими требованиями.

Ниже приведен пример, если вы используете Angular 1.x

<button class="bt-save" ng-disabled = "allowButtonClick()">Save</button>