Как правильно настроить проверку в приложении Angular 5?

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

Демо