Question

我有验证错误样式和错误消息，提交表单时遇到问题。显示了错误消息，但样式无效。

input.ng-invalid.ng-touched  
{  
    border: 1px solid #d70000;
    color: #d70000;
}  

<input type="text" class="form-control" [ngModelOptions]="{ updateOn: 'blur' }" [(ngModel)]="trip.city" id="city" #city="ngModel" required name="city">

正如您在上面看到的，我在字段中附加了必填属性。但是，只有在触摸字段时才能使用样式（从样式中可以看到）。

完整模板：

<form class="form_step_wrapper" (ngSubmit)="onSubmit(f1)"  #f1="ngForm" novalidate> 
    <div class="form_box">
    <div class="step_form form-horizontal">

        <section class="npc_box active">                                                      
            <div class="form-group">
                <label class="control-label" for="city">City</label>
                <input type="text" class="form-control"
                [ngModelOptions]="{ updateOn: 'blur' }" [(ngModel)]="trip.city" id="city"
                 #city="ngModel" required name="city">    
                <div *ngIf="city.errors && (city.touched || f1.submitted)">
                        <div class="error_message" *ngIf="city.errors?.required">
                                <span class="e_arrow"></span>
                                <i>Please enter city</i>                                                
                        </div>                      
                 </div>  
            </div>       
        </section>                                                                  
    </div>
    <div class="np_box">
        <button class="next_step">Continue<i></i></button>
        <div class="clear"></div>
    </div>
    </div>

</form>

提交时我还需要应用样式，您知道我应该更改/添加什么吗？谢谢。

Answer 1

您可以按以下方式验证输入，可以在组件的CSS文件中自定义错误颜色。

 <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
                    <div class="form-group">
                        <label for="city">City</label>
                        <input type="text" class="form-control" name="city" [(ngModel)]="model.city" #city="ngModel" [ngClass]="{ 'is-invalid': f.submitted && city.invalid }" required />
                        <div *ngIf="f.submitted && city.invalid" class="invalid-feedback">
                            <div *ngIf="city.errors.required">City is required</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <button class="btn btn-primary">Register</button>
                    </div>
                </form>

https://stackblitz.com/edit/angular-template-ngmodel-validate

我将使用您更新的代码进行更新

您需要将(ngSubmit)="f.form.valid && onSubmit()"添加到HTML

https://stackblitz.com/edit/angular-template-ngmodel-validate-kjvs6r

Answer 2

在我看来，将模板变量名称设置为“ city”会导致错误，因为它是保留字。更改它可以解决问题：

HTML

<input type="text" class="form-control" [ngModelOptions]="{ updateOn: 'blur' }" 
   [(ngModel)]="trip.city" id="city" #city2="ngModel" required name="city">

Demo

如何在Angular 5应用中正确设置验证？

2 个答案: