Parent Form

 avatar
unknown
html
2 years ago
9.2 kB
8
Indexable
<form (ngSubmit)="onGoalSubmit(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 *ngIf="name.invalid && (name.dirty || name!.touched)">
                      <div *ngIf="name!.errors?.['required']" class="valid-msg valid-msg--invalid">
                        This field is required
                      </div>
                      <div *ngIf="name!.errors?.['minlength']" class="valid-msg valid-msg--invalid">
                        This field requires at least 5 characters
                      </div>
                    </div>
                    <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="Selecting this will make that Goal stand out from the others." 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 <br>
                    <span class="smaller color-red">
                      (Saving tasks not available as of TODAY but...
                      <br>...you can create tasks under Calendar View)
                    </span>
                </p>
                <p class="txt-center">
                    Make a to-do list. This will clarify the path to the goal and
                    make it more interesting to achieve it by deleting cases.
                </p>
                <div class="accordion">
                  <gt-new-task-nested
                      *ngFor="let task of tasksNested"
                      [data]="task" #accordion_item
                      (formEvent)="onTaskSubmit($event)">
                  </gt-new-task-nested>
                </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 headline--minheight">
                            Goal priority
                        </h3>
                        <ul class="priority list" getPriority #priority>
                            <li class="priority__item">
                                <button type="button" class="label label-priority label-priority--high label--nested">
                                    High priority
                                </button>
                            </li>
                            <li class="priority__item">
                                <button type="button" class="label label-priority label-priority--medium label--nested">
                                    Medium priority
                                </button>
                            </li>
                            <li class="priority__item">
                                <button type="button" class="label label-priority label-priority--nopriority label--nested">
                                    No priority
                                </button>
                            </li>
                            <!-- przekaż wartość taskPriority do input type hidden -->
                            <input
                            class="visuallyhidden"
                            type="hidden"
                            name="priority"
                            />
                        </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>
Editor is loading...