add input onclick button form angular 7

Question

Hello my problem is the following I wanted to add an input line in my form by clicking on the plus button on the image below by clicking on the button I would like to add the same line and no longer display the plus button on the old input:

this is my code html :

<div id="forms" class="page-layout simple fullwidth" fxLayout="column">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Contact</span>
            </div>
            <div class="h1 mt-16">Contact</div>
        </div>
    </div>
    <!-- / HEADER -->
    <div class="content p-24">
        <p class="pt-16 pb-32">
            {{'contact.Veuillez remplir le formulaire ci-dessous pour effectuer votre demande.Nous allons traiter votre requête dans les plus brefs délais.' | translate}}
        </p>
        <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">
            <form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
                name="form" [formGroup]="form">

                <div class="" style="text-align: center">
                    <img class="logo-ca" src="assets/images/logos/snap.png">
                </div>
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>{{'contact.First name' | translate}}</mat-label>
                        <input matInput formControlName="firstName" >
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error>{{'contact.First Name is required!' | translate}}</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" fxFlex="50" class="pl-4">
                        <mat-label>{{'contact.Last name' | translate}}</mat-label>
                        <input matInput formControlName="lastName">
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error>{{'contact.Last Name is required!' | translate}}</mat-error>
                    </mat-form-field>

                </div>

                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <mat-form-field appearance="outline" fxFlex="100" class="pl-4">
                        <mat-label>{{'contact.Mail' | translate}}</mat-label>
                        <input matInput formControlName="mail" required>
                        <mat-icon matSuffix class="secondary-text">mail</mat-icon>
                        <mat-error *ngIf="primaryEmail.errors?.required">{{'contact.Mail is required!' | translate}}</mat-error>
                        <mat-error *ngIf="primaryEmail.errors?.email">{{'contact.Email Incorrect!' | translate}}</mat-error>
                    </mat-form-field>
                </div>
                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <mat-form-field appearance="outline" fxFlex="100" class="pl-4">
                        <mat-label>Groupe AD</mat-label>
                        <input matInput formControlName="group" required>
                        <mat-icon matSuffix class="secondary-text">group</mat-icon>
                        <mat-error>{{'contact.Groupe AD is required!' | translate}}</mat-error>
                    </mat-form-field>
                </div>
                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <mat-form-field appearance="outline" fxFlex="60" class="pl-4">
                        <mat-label>Domaines</mat-label>
                        <input matInput formControlName="domain">
                    </mat-form-field>
                    <mat-checkbox appearance="outline" fxFlex="15" class="pl-4">{{'contact.Read' | translate}}
                    </mat-checkbox>
                    <mat-checkbox appearance="outline" fxFlex="15" class="pl-4">{{'contact.Write' | translate}}
                    </mat-checkbox>
                    <button title="Modifier" fxFlex="10" mat-icon-button color="basic">
                        <mat-icon style="color:#3c5d80; cursor: pointer;">add_circle</mat-icon>
                    </button>

                </div>
                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <mat-form-field appearance="outline" fxFlex="100" class="pl-4">
                        <mat-label>Message</mat-label>
                        <input matInput formControlName="message">
                        <mat-icon matSuffix class="secondary-text">message</mat-icon>
                    </mat-form-field>
                </div>
                <div fxLayoutAlign="end center">
                    <button mat-raised-button color="primary" [disabled]="form.invalid">{{'contact.Envoyer'
                      | translate }}</button>
                </div>

            </form>
        </div>
    </div>

</div>

And this is my code TS :

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { locale as english } from 'app/pages/contact/i18n/en';
import { locale as french } from 'app/pages/contact/i18n/fr'

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {

  form: FormGroup;

  // Private
  private _unsubscribeAll: Subject<any>;

  /**
   * Constructor
   *
   * @param {FormBuilder} _formBuilder
   */
  constructor(
      private _formBuilder: FormBuilder,
      private _fuseTranslationLoaderService: FuseTranslationLoaderService,
  )
  {
      // Set the private defaults
      this._unsubscribeAll = new Subject();
      this._fuseTranslationLoaderService.loadTranslations(english, french);
  }

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void
  {
      // Reactive Form
      this.form = this._formBuilder.group({
          firstName : ['', Validators.required],
          lastName  : ['', Validators.required],
          mail   : ['', Validators.email],
          group  : ['', Validators.required],
          domain      : ['', Validators.required],
          message     : ['',],
      });

  }

  /**
   * On destroy
   */
  ngOnDestroy(): void
  {
      // Unsubscribe from all subscriptions
      this._unsubscribeAll.next();
      this._unsubscribeAll.complete();
  }
  get primaryEmail() {
    return this.form.get('mail');
} 
}

I want your help , thank you for your time

this is my form in Image :

Answer 1

You can create one more div below the input with an *ngIf='visible'. In the TS code this visible variable will be declared like visible : Boolean = false;. on the icon button you have to change to look like

<div *ngIf="!visible">
   <button title="Modifier" fxFlex="10" mat-icon-button color="basic" (click)="visible = !visible">
   <mat-icon style="color:#3c5d80; cursor: pointer;">add_circle</mat-icon>
   </button>
</div>

This way you will achieve what you want.