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

【问题标题】：I am using angular 2 and I have created a form and Marked fields as required but still my got submitted我正在使用 angular 2，并且我已经创建了一个表单并根据需要标记了字段，但我仍然提交了
【发布时间】：2019-01-16 22:45:55
【问题描述】：

我正在使用 Angular 2，我创建了一个表单并将所有字段标记为必填，但只有一个必填字段不起作用，但是当我通过浏览器检查时，我可以检查该字段，它给出了类似 @987654322 的错误@, 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"

【问题讨论】：

您的<form> 中缺少novalidate 属性
@Aravind 怎么用你能提供给我吗？
看看这个answer
您的意思是即使表单无效也启用提交按钮？
@JanithWidarshana 是同样的问题

标签： javascript angular angular2-forms

【解决方案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">

【讨论】：