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

Posted 2023-03-05

【中文标题】表单未验证角度 2 中 [ngClass] 的使用

【英文标题】：Form not validating on usage of [ngClass] in angular 2

【发布时间】：2017-12-09 22:49:09

【问题描述】：

我正在尝试对空字段进行验证，如下所示。但是表格没有验证。添加 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>

【问题讨论】：

username 是什么？这对flightCarrier 意味着什么？

对不起。是的，这仅意味着航班承运人。修改了代码。

希望这个例子会有所帮助。 plnkr.co/edit/8Mf5drjsXCNwuwkXg4ws?p=preview

感谢您的回复。有效。但这给我带来了问题。我将更新代码。问题是如果我添加更多行和列，它只会为第一行提供错误消息。此外，它不验证其他行。请帮忙！

那是因为您没有为其他行设置验证，例如required。很抱歉回复晚了。

【参考方案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> 

【讨论】：

感谢@Rahul 的回复，但如果我更改此代码，输入值后仍会显示错误。另外，如果我尝试提交空表单，则没有验证。请帮忙！

另外，我想在提交表单时验证 Flight Carrier 输入文本框是否具有空值，即单击“Go”按钮。

感谢回复！