Brtdku

I have a form but i'm using a button outside the form to submit the data to an API.
The form has error messages for required fields, and hey are shown then a user selects a input but doesn't fill in any data (default HTML5 validation).

Since i'm not actually submitting the form, is there a way to show the same validation messages when the user clicks the button outside the form?

UPDATE: Added some code to further explain the isse. Also, i forgot to mention that i'm using Material Design for Bootstrap as my CSS framework.

Form HTML (component.html):

<form class="custom-form p-2">

    <div class="row">

      <div class="col-sm-6">

        <div class="md-form form-sm">

          <input mdbInputDirective type="text" id="title" [(ngModel)]="dataService.catalog.title" name="title"

            value="{{ dataService.catalog.title }}" required [validateSuccess]="false" placeholder=""

            data-error="This field is mandatory" class="form-control">

          <label for="title">Title</label>

        </div>

      </div>

      <div class="col-sm-2">

        <div class="md-form form-sm">

          <input mdbInputDirective type="date" id="date" [ngModel]="dataService.catalog.date | date:'yyyy-MM-dd'"

            name="date" (ngModelChange)="date = $event" required [validateSuccess]="false"

            placeholder="" data-error="This field is mandatory" class="form-control">

          <label for="date">Date</label>

        </div>

      </div>

      <div class="col-sm-12">

        <div class="md-form form-sm">

          <textarea type="text" id="description" [(ngModel)]="dataService.catalog.description" name="description"

            value="{{ dataService.catalog.description }}" required [validateSuccess]="false" placeholder=""

            data-error="This field is mandatory" class="md-textarea form-control" mdbInputDirective rows="3"></textarea>

          <label for="description">Description</label>

        </div>

      </div>

    </div>

</form>

Button HTML (component.html):

<button mdbBtn type="button" color="success" class="waves-light" size="sm" mdbWavesEffect (click)="create()">

    <i class="fa fa-plus-square mr-sm-2 mr-1"></i> Create Catalog

</button>

Create Method (component.ts):

create() {

    //TODO: call the form's own validation method to show the erros?!   



    if(formValid) {

        this.dataService.create(this.dataService.catalog).subscribe(value => {

            console.log(value);

        }, error => {

            console.log(error);

        });

    }   

}

You can use your own functionality. Like store the value of each textbox and on clicking the submit button validate your values.