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