表单未验证角度 2 中 [ngClass] 的使用

Question

我正在尝试对空字段进行验证，如下所示。但是表格没有验证。添加 3 行时，每行有 2 列，错误消息仅显示在第一行。表格标签在表单标签下。在提交表单时将转到 fetchingFLights 方法。

<div class="content">
        <form class="form" (ngSubmit)="f.form.valid && fetchingFlights()" #f="ngForm" novalidate>

            <table>
                <tr>
                    <th>
                        <label>Flight Carrier: </label>
                    </th>
                    <td>
                        <div [ngClass]="{ 'has-error': f.submitted && !flightCarrier.valid }"></div>
                        <input type="text" name="flightCarrier" placeholder="Enter Flight Carrier Code" class="textbox" [(ngModel)]="flightInfo.flightCarrierCode" #flightCarrier="ngModel" required>
                        <div class="validation" *ngIf="f.submitted && !flightCarrier.valid" >Carrier code is required</div>
                    </td>



                    <th>
                        <label>Flight Number: </label>
                    </th>
                    <td>
                        <div [ngClass]="{ 'has-error': f.submitted && !flightNumber.valid }"></div>
                        <input type="text" name="flightNumber" placeholder="Enter Flight Number" class="textbox" [(ngModel)]="flightInfo.flightNumber" #flightNumber="ngModel" required >
                        <div class="validation" *ngIf="f.submitted && !flightNumber.valid" >Flight Number is required</div>
                    </td>
                </tr>


                <tr>
                    <th>
                        <label>From Date: </label>
                    </th>
                    <td>

                        <div [ngClass]="{ 'has-error': f.submitted && !fromDate.valid }"></div>
                        <input type="date" name="fromDate"  class="textbox" [(ngModel)]="flightInfo.fromDate" #fromDate="ngModel">
                        <div class="validation" *ngIf="f.submitted && !toDate.valid" >From Date is required</div>
                    </td>

                    <th>
                        <label>To Date: </label>
                    </th>
                    <td>
                        <div [ngClass]="{ 'has-error': f.submitted && !toDate.valid }"></div>
                        <input type="date" name="toDate" class="textbox" [(ngModel)]="flightInfo.toDate" #toDate="ngModel">
                        <div class="validation" *ngIf="f.submitted && !toDate.valid" >To Date is required</div>
                    </td>
                </tr>


                <tr>
                    <th>
                        <label>Board Point: </label>
                    </th>
                    <td>
                        <div [ngClass]="{ 'has-error': f.submitted && !boardPoint.valid }"></div>
                        <input type="text" name="boardPoint" placeholder="Enter Board Point" class="textbox" [(ngModel)]="flightInfo.boardPoint" #boardPoint="ngModel">
                        <div [ngClass]="{ 'has-error': f.submitted && !boardPoint.valid }"></div>
                    </td>

                    <th>
                        <label>Off Point: </label>
                    </th>
                    <td>
                        <div [ngClass]="{ 'has-error': f.submitted && !offPoint.valid }"></div>
                        <input type="text" name="offPoint" placeholder="Enter Off Point" class="textbox" [(ngModel)]="flightInfo.offPoint" #offPoint="ngModel">
                        <div [ngClass]="{ 'has-error': f.submitted && !offPoint.valid }"></div>
                    </td>
                </tr>

            </table>

            <div><button type="submit" value="Go">Go</button></div>
            <div><input type="reset" value="reset"></div>


        </form>
    </div>

Answer 1

<form class="form" (ngSubmit)="f.form.valid && fetchingFlights()" #f="ngForm" novalidate>
<table>
 <tr>
    <th><label>Flight Carrier: </label></th>
        <td>
            <div  [ngClass]="{ 'has-error': f.submitted && !flightInfo.flightCarrierCode.valid }"></div>
            <input type="text" name="flightCarrier" placeholder="Enter Flight Carrier Code" class="textbox" [(ngModel)]="flightInfo.flightCarrierCode" #flightCarrier="ngModel" required>
            <div class="validation" *ngIf="f.submitted && !flightInfo.flightCarrierCode.valid" >Carrier code is required</div>
        </td>
</tr>
</table>

<div><button type="submit" value="Go">Go</button></div>