show error on form validation angular only after submit

Question

I'm trying to validate template-driven from on angular, but I have a little problem, the field is required then is invalid by default and the error div is shown from the start, I need to show the error div only after submit, the is a native way to do ir ?I know I could create a variable to know if the form is submitted but I want to know if there is native way

<div class="mb-3">
                <label class="form-label">Nombre</label>
                <input 
                  type="text" 
                  class="form-control"
                  placeholder="Nombre"
                  required
                  [(ngModel)]="heroe.nombre"
                  name="nombre"
                  #nombre="ngModel">
            </div>
            <div *ngIf="nombre.invalid" class="alert alert-danger">
                This fild is mandatory
            </div> 

question from:https://stackoverflow.com/questions/65600638/show-error-on-form-validation-angular-only-after-submit

Answer 1

Waitting for answers