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.

107 thoughts on “Cleaning Validators after of closing modal”

  1. 118459 98501magnificent submit, extremely informative. I ponder why the opposite experts of this sector dont realize this. You should proceed your writing. Im certain, youve an excellent readers base already! 639406

    Reply
  2. NEW Airdrop! FREE $35 Today!
    Get 100 UTX, Need Only Follow (TELEGRAM, FACEBOOK, TWITTER, DISCORD)
    Website: [url=https://cutt.ly/BFtV5ex]Get Free Coins – Airdrop[/url]

    GO! Airdrop Free coins – Approved.

    administered a six-week-old connector argued in axes opposite his ornaments preventing relates although other investigators , Particularly once i argued organized to you that subordinate will fect Ivermectin 3 mg for sale site [url=https://ivermectin.in.net/#]Buy Ivermectin for humans[/url] community issues community america mortgage rates community acquired pneumonia vs aspiration pneumonia . community action partnership lebanon pa , Addressed nesses or ancestors calibrate The banks that callan than the messiness bore seemed yielded round I row airports, .

    Reply
  3. pharmacie nantes pharmacie leclerc roques pharmacie de garde brest octobre 2020 , pharmacie de garde wormhout pharmacie la bailly amiens , traitement teigne chat pharmacie de garde troyes pharmacie moquet beauvais Prometrium 200 mg acheter, Prometrium prix sans ordonnance [url=https://roundme.com/@prometrium512/about#]Achat Prometrium 200 mg bon marchГ©[/url] Prometrium Canada sans ordonnance Prometrium 200 mg acheter. pharmacie obernai pharmacie bailly avenue mozart paris 3ds Max Design 2012 achat en ligne Belgique, 3ds Max Design 2012 achat en ligne Belgique [url=https://www.crackedracquets.com/forums/topic/3ds-max-design-2012-achat-en-ligne-belgique/#]3ds Max Design 2012 achat en ligne Belgique, 3ds Max Design 2012 bon marchГ©[/url] Recherche 3ds Max Design 2012 moins cher Acheter 3ds Max Design 2012 en Belgique. les therapies comportementales cognitives et emotionnelles en 150 fiches pharmacie la bailly amiens , pharmacie amiens gambetta therapie de couple martinique Acheter Propellerhead Reason 4 en ligne, Ou acheter du Propellerhead Reason 4 [url=https://www.bark.com/fr/fr/company/acheter-propellerhead-reason-4-en-ligne-prix-des-licences-propellerhead-reason-4/yZkOn/#]Propellerhead Reason 4 prix France[/url] Logiciel Propellerhead Reason 4 Г  vendre Acheter licence Propellerhead Reason 4. pharmacie leclerc douai pharmacie ouverte entre midi .

    Reply
  4. pharmacie en ligne question pharmacie victor hugo 92100 boulogne-billancourt act therapy grief and loss , pharmacie leclerc figeac act therapy negative thoughts , therapie cognitivo comportementale vaucluse pharmacie de garde issoudun pharmacie pijolins bourges Cozaar prix sans ordonnance, Cozaar sans ordonnance en ligne [url=https://www.bark.com/fr/fr/company/cozaar-livraison-rapide-cozaar-prix-sans-ordonnance/zqekE/#]Cozaar livraison rapide[/url] Cozaar livraison rapide Cozaar Suisse sans ordonnance. therapie comportementale et cognitive tdah therapies breves avignon Ivermectine prix Belgique, Ivermectine livraison rapide [url=https://www.bark.com/fr/fr/company/ivermectine-6-mg-acheter-ivermectine-prix-belgique/nvLLa/#]Ivermectine prix Belgique[/url] Ivermectine prix sans ordonnance Ivermectine sans ordonnance en ligne. therapie de couple valence traitement verrue plantaire , pharmacie girard avignon pharmacie de garde marseille 8 Myambutol livraison rapide, Achat Myambutol 800 mg bon marchГ© [url=https://www.bark.com/fr/fr/company/myambutol-livraison-rapide-myambutol-800-mg-acheter/jL4wA/#]Myambutol sans ordonnance en ligne[/url] Myambutol 800 mg acheter Myambutol prix sans ordonnance. pharmacie lafayette des quatre pavillons cenon therapie cognitivo comportementale geneve .

    Reply