Parent Form
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 <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 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> 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...