Cleaning Validators after of closing modal

I have an Modal, and it haves a validator that makes that when you leave empty the input, the borders turns in red, my problem is that when I close the modal and open another time the borders stays in red, and it should be normal, this is my code:

html:

 <form *ngIf="isVisibleFormTask" [formGroup]="formAddTask">
    <nz-tabset>
      <nz-tab nzTitle="Agregar tarea">
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="TaskName"><i class="fas fa-file text-default"></i> Nombre</label>
              <input maxlength="30" class="form-control form-control-sm" type="text" id="TaskName" name="TaskName" placeholder="Nombre de la tarea" formControlName="TaskName" />
            </div>
      

         
              <div class="form-group col-md-6">
                <label for="StatusTask"><i class="fas fa-stream text-default"></i> Estado</label>
                <select class="form-control form-control-sm" id="StatusTask" name="StatusTask">
                  <option value="">Nuevo</option>
                  <option value="">Activo</option>
                  <option value="">Resuelto</option>
                  <option value="">Finalizado</option>
                </select> 
              </div>
        
          </div>
      
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="TeamChooseTask"><i class="fas fa-users text-default"></i> Equipo</label>
              <select class="form-control form-control-sm" id="TeamChooseTask" name="TeamChooseTask" formControlName="TeamChoose" name="">
                <option value="">Front-End</option>
                <option value="">Back-End</option>
                <option value="">DevOps</option>
                <option value="">Marketing</option>
              </select>
            </div>
      
            <div class="form-group col-md-6">
              <label for="ProjectChooseTask"><i class="fas fa-clipboard text-default"></i> Proyecto</label>
              <select name="ProjectChooseTask" class="form-control form-control-sm" id="ProjectChooseTask" formControlName="ProjectChoose">
                <option value="">Choose a project</option>
                <option value="">Choose a project</option>
                <option value="">Choose a project</option>
                <option value="">Choose a project</option>
              </select>
            </div>
          </div>
      
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="ResponsableTask"><i class="fas fa-user text-default"></i> Responsable</label>
              <select name="ResponsableTask" id="ResponsableTask" class="form-control form-control-sm">
                <option value="">Person 1</option>
                <option value="">Person 2</option>
                <option value="">Person 3</option>
                <option value="">Person 4</option>
              </select>
            </div>
            <div class="form-group col-md-6">
              <label for="DateEndTask"><i class="fas fa-calendar-day text-default"></i> Fecha de entrega</label>
              <input type="date" id="DateEndTask" name="DateEndTask" class="form-control form-control-sm">
            </div>
          </div>
      
          <div class="form-row">
            <div class="form-group col-md-12">
              <label for="TaskDescription"><i class="fas fa-pencil-alt"></i> Descripción</label>
              <textarea class="form-control form-control-sm" id="TaskDescription" name="TaskDescription" rows="1" placeholder="Añade detalles" style="resize: none;"></textarea>
            </div>
          </div>
    
      </nz-tab>
      <nz-tab nzTitle="Avanzado">
        <p class="ct-lead"> Este apartado es recomendable proveer de información para un correcto seguimiento de las métricas en el dashboard de analytics. </p>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="DateGoalStartTask"><i class="fas fa-calendar-day text-default"></i> Fecha de inicio estimada</label>
            <input type="date" class="form-control form-control-sm" name="DateGoalStartTask" id="DateGoalStartTask">
          </div>
          <div class="form-group col-md-6">
            <label for="DateGoalEndTask"><i class="fas fa-calendar-day text-default"></i> Fecha de entrega estimada</label>
            <input type="date" class="form-control form-control-sm" name="DateGoalEndTask" id="DateGoalEndTask">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="TimeDurationTask"><i class="fas fa-stopwatch text-default"></i> Tiempo estimado (duración de la tarea en horas)</label>
            <input type="number" class="form-control form-control-sm" name="TimeDurationTask" id="TimeDurationTask">
          </div>
        </div>
      </nz-tab>
    </nz-tabset>

  </form>

My document ts make the function of validators:

InitForms(): void {
    this.formAddTask = this._fb.group({
      TaskName: new FormControl('', [Validators.required]),
      TeamChoose: new FormControl('', [Validators.required]),
      ProjectChoose: new FormControl('', [Validators.required])
    });
    this.formAddProject = this._fb.group({
      TeamChoose: new FormControl('', [Validators.required]),
      ProjectName: new FormControl('', [Validators.required])

    });
    this.formAddTeam = this._fb.group({
      TeamName: new FormControl('', [Validators.required]),
    });
    this.formAddMember = this._fb.group({
      TeamChoose: new FormControl('', [Validators.required]),
      ProjectChoose: new FormControl('', [Validators.required]),
      Email: new FormControl('', [Validators.required,  Validators.email]),

    });
  }

showModal(typeModal: number): void {
  this.isVisibleFormTask = false;


  switch (typeModal) {
    case 1:
      this.titleModal = "Estás creando una tarea";
      this.isVisibleFormTask = true;
      break;
  }
  this.isVisible = true;
}

handleOk(): void {
  console.log('Button ok clicked!');
  //this.isVisible = false;
}

handleCancel(): void {
  console.log('Button cancel clicked!');
  this.isVisible = false;
}

And the logic in css that I’m using for make it function:

.ng-invalid.ng-touched {
  border-color: red !important;

}

How you can see this code with TypeScript and have angular components., so how can I make that when the modal is closed its be cleaned.

18 thoughts on “Cleaning Validators after of closing modal”

Leave a Comment