I have a form in Angular 2 look like this :

<form #conForm="ngForm" id="formConnection" >
    <div class="row">
        <label>Name</label>
        <input id="inputName"
               type="text"
               placeholder="Name (required)"
               required minlength="3"
               [(ngModel)]="connector.name"
               ngControl="nameField"
               #nameField="ngModel"
               name="formInput" />
        <span *ngIf="nameField.errors && (nameField.dirty || nameField.touched)">
            <span *ngIf="nameField.errors.required">Enter name</span>
        </span>
    </div>

    <div class="row">
        <label>Description</label>
        <input [(ngModel)]="connector.description"
               id="inputDescription"
               type="text"
               required minlength="3"
               ngControl="descField"
               name="descriptionInput"
               #descField="ngModel" />
    </div>

<button type="submit" id="publishConButton"
 (click)="conForm.valid && Publish()" [disabled]="isSaving">Publish</button>

it basically asks for name and description then I have a button to publish the content been typed in. This validation works it won't call the function Publish unless all the validation is satisfied. However all the popup dialog that angular 2 present nicely in each input field does not show up anymore. So I have to add my own field to display the message which I do not like.

in my previous attempt in my button I only did

 <button type="submit" id="publishConButton"
 (click)="Publish()" [disabled]="isSaving">Publish</button>

In this the popup boxes showed up nicely and shows minimum 3 characters needed in a nice popup built into angular. But unfortunately the Publish function does gets called in this and an invalid connection is been published. Anyone know why is this?