How to save nested tasks to the database

// New Goal Form - tasks inside are generated automatically on line 89 'gt-new-task-nested'

<form (ngSubmit)="onSubmit(form)" #form="ngForm">
    <ul class="modal-list list">
        <li class="modal-list__step active" data-id="0" #newGoalStep>
            <p class="modal__heading modal__heading--center">
                Start by stating a goal
            </p>
            <div class="modal__section">
                <h3 class="modal__section-name headline">
                    Goal name
                </h3>
                <input type="text" name="name" placeholder="State your goal" required minlength=5 ngModel #name="ngModel" />
                <div class="d-flex">
                    <div class="modal__half check-item">
                        <label class="checkbox checkbox--green">
                            <input class="checkbox__input" type="checkbox" name="isMainGoal" ngModel>
                            <span class="checkbox__checkmark checkbox__checkmark--radius-square"></span>
                        </label>
                        <div class="check-item__content">
                            <h4 class="check-item__name subhead d-flex">
                                The main goal&nbsp;&nbsp;&nbsp;
                                <span data-tooltip="Zaznaczenie spowoduje że ten cel będzie wyróżniony spośród innych." class="break">
                                  <i class="icon icon--info"></i>
                                </span>

                            </h4>

                        </div>
                    </div>
                    <div class="modal__half">

                    </div>
                </div>
            </div>
            <div class="modal__section">
                <h3 class="modal__section-name headline">
                    Goal completion criterion
                </h3>
                <textarea name="details"
                    placeholder="Describe your goal in details. This will help break down&#10;into tasks more accurately and get exactly what you want."
                    ngModel>
                </textarea>
            </div>
            <div class="modal__section d-flex">
                <div class="modal__half">
                    <h3 class="modal__section-name headline headline--minheight">
                        Which area of life will this goal improve ?
                    </h3>
                    <select class="select--categories select--modal list" name="select_category" #select_category [(ngModel)]="select_category.value">
                        <option value="family/communication">
                            Family/communication
                        </option>
                        <option value="money">
                            Money
                        </option>
                        <option value="work/career">
                            Work/career
                        </option>
                        <option value="health and sports">
                            Health and sports
                        </option>
                        <option value="self knowledge">
                            Self-knowledge
                        </option>
                        <option value="travels">
                            Travels
                        </option>
                    </select>
                </div>
                <div class="modal__half">
                    <h3 class="modal__section-name headline headline--minheight">
                        Creation Date
                    </h3>
                    <input type="date" name="creationDate" ngModel>
                </div>
            </div>
        </li>
        <li class="modal-list__step" data-id="1" #newGoalStep >
            <p class="modal__heading modal__heading--center">
                Action plan
            </p>
            <p class="txt-center">
                Make a to-do list. This will clarify the path to the goal and<br>
                make it more interesting to achieve it by deleting cases.
            </p>
            <div class="accordion">
              <form (ngSubmit)="tasksFormSubmit(tasksForm)" #tasksForm="ngForm">
              <div *ngFor="let task of tasksNested">
                  <gt-new-task-nested [data]="task" #accordion_item></gt-new-task-nested>
              </div>
                <input class="visuallyhidden" type="submit" #submitBtn2>
              </form>
            </div>
            <div class="modal__section my-0">
              <div class="modal-task-btn" (click)="addNewTask()">
                <i class="icon icon--plus icon--mr-3 icon--grey"></i>
                &nbsp;Add New Task
              </div>
            </div>
            <div class="modal__section d-flex">
                <div class="modal__half">
                    <h3 class="modal__section-name headline">
                        Goal priority
                    </h3>
                    <ul class="priority list">
                        <li class="priority__item">
                            <button class="label label-priority label-priority--high label--nested">
                                High priority
                            </button>
                        </li>
                        <li class="priority__item">
                            <button class="label label-priority label-priority--medium label--nested">
                                Medium priority
                            </button>
                        </li>
                        <li class="priority__item">
                            <button class="label label-priority label-priority--nopriority label--nested">
                                No priority
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="modal__half">
                  <h3 class="modal__section-name headline headline--minheight">
                    Deadline Date
                  </h3>
                  <input type="date" name="endDate" ngModel>
              </div>
            </div>

        </li>
        <li class="modal-list__step" data-id="2" #newGoalStep>
            <p class="modal__heading modal__heading--center">
                Create a goal
            </p>
            <p class="txt-center">
                A public pledge 'burns bridges', leaving no other path, except for success.<br>
                And it gives a signal to friends that they need support or help that motivates <br>
                and increases the chances of success.
            </p>
            <div class="modal__section">
                <h3 class="modal__section-name headline">
                    1. Write a promise to successfully achieve your goal
                </h3>
                <p>
                    Make a public promise that you will reach your goal on time.
                </p>
            </div>
            <div class="modal__section">
                <h3 class="modal__section-name headline">
                    2. Post a promise
                </h3>
                <ul class="social-list list">
                    <li class="social-list__item">

                    </li>
                    <li class="social-list__item">

                    </li>
                    <li class="social-list__item">

                    </li>
                </ul>
            </div>
        </li>
    </ul>
    <input class="visuallyhidden" type="submit" #submitBtn>
</form>