我正在使用 angular 2，我已经根据需要创建了一个表单和标记字段，但我仍然提交了

Question

我正在使用 Angular 2 并且我已经创建了一个表单并根据需要标记所有字段，但是只有一个需要的字段不起作用但是当我通过浏览器检查时我可以检查那个字段出现 ng-untouched、ng-invalid 之类的错误，但我的表单已提交。

我的代码如下：

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

我的表格不适用于此字段：

[(ngModel)]="selectedExperience.restaurantName"

Answer 1

您为此使用了模板驱动的表单。请删除 [formControl]="restaurant" 并添加 name="restaurantName" #restaurantName="ngModel"。以下是工作代码。这个对我有用。

<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">

我正在使用 angular 2，我已经根据需要创建了一个表单和标记字段，但我仍然提交了

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

javascript

angular2-forms

angular