Как показать ошибки внутри формы при отправке в угловых 5? - PullRequest
Новая
       59

Как показать ошибки внутри формы при отправке в угловых 5?

0 голосов
/ 20 октября 2018

У меня есть следующая форма, сценарий ts и сообщение об ошибке для проверки: 

<form [formGroup]="tripForm" (ngSubmit)="addTrip(tripForm)" novalidate> 
    <div class="form-group">    
        <label class="control-label">Trip Name</label>
        <input type="text" class="form-control" placeholder="" id="newTripName" name="newTripName" formControlName="newTripName">

        <div *ngIf="tripForm.controls['newTripName'].errors && (tripForm.controls['newTripName'].dirty || tripForm.controls['newTripName'].touched)">
            <div class="error_message" *ngIf="tripForm.controls['newTripName'].errors.required">
                    <span class="e_arrow"></span>
                    <i>Please enter Trip Name</i>
            </div>
        </div>
    </div>
</form>

ngAfterViewInit() {
    this.tripForm = new FormGroup ({
      newTripName: new FormControl('', {
        validators:  Validators.compose([
          Validators.required        
        ]),      
        updateOn: 'blur'
      })
    });   
  }

addTrip(tripForm:NgForm) {    
    if (!tripForm.valid) {        
      return;
    }
}

Проверка корректно работает при размытии, но проблема в том, что проверка также должна работать при отправке.Метод isvalid возвращает false, но я не уверен, как показать сообщение об ошибке.Как вы можете видеть, я показываю сообщение только тогда, когда поле формы грязное или сенсорное, а это не тот случай, когда форма отправляется.

Любая идея, что нужно изменить / добавить в код выше, чтобы сделатьэто форма для отправки, а?

Спасибо.

...