Angular 2 : prevent submit when input field is required in the page, using FormControl

Question

I haven't used a form tag to wrap the input, where i want to validate that input on the submit click

i tried using FormControl, i didn't get an idea to stop submitting the value, it gets submitted.

The code i tried is below

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

how could i prevent submitting(force input to be added), Any idea will appreciated

Answer 1

Add disabled attribute to your button by marking a function and return value (True/False) according to your requirement.

Below will the example if you are using Angular 1.x

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

Answer 2

Just check for validatoin like this.

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

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

}

Answer 3

Just add some function which returns True/False like this

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

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

You can Add expression to your HTML as well if you conditions are less else call function as I suggested.

Answer 4

Just add [disabled]="!deadlineVal.valid" to your button.

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