I am using angular 2 and I have created a form and Marked fields as required but still my got submitted

Question

I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched , ng-invalid sill my form got submitted.

My code is below:

<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
    <div class="form-group">
        <div class="col-sm-6">
            <!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
            <input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />

        </div>
        <div class="col-sm-6">
            <input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />

        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
            <input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>

        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
                <option value="" disabled selected>Select Restaurant Type</option>
                <option value="Ethnic">Ethnic</option>
                <option value="Fast Food">Fast Food</option>
                <option value="Fast Casual">Fast Casual</option>
                <option value="Casual Dinning">Casual Dinning</option>
                <option value="Family Style">Family Style</option>
                <option value="Fine Dinning">Fine Dinning</option>
                <option value="Cafe">Cafe</option>
                <option value="Bar">Bar</option>
            </select>

        </div>
        <div class="col-sm-6">
            <select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
                <option value="" disabled selected>Select Work Profile</option>
                <option value="Bartender">Bartender</option>
                <option value="Server">Server</option>
                <option value="Busser">Busser</option>
            </select>

        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
            <div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
                <small [hidden]="!fromDate.errors.pattern" class="text-danger">
                                                                From Date is required
                                                            </small>
            </div>
            <!--<div *ngIf="fromDate.errors">
                 <small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
             </div>-->
        </div>
        <div class="col-sm-6">
            <input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
            <div *ngIf="toDate.errors">
                <small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
            <p>This is my current job</p>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-12">
            <input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
        </div>
    </div>
</form>

my form is not working for this field:

[(ngModel)]="selectedExperience.restaurantName"

Answer 1

You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel" . Following is the working code. It works for me.

<input type="text"   class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
                  #myserver [source]="restaurants" [list-formatter]="autocompleListFormatter" 
                  value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" 
                  (blur)="update(myserver.value)" loading-text="Loading"  required  name="restaurantName" #restaurantName="ngModel">