angular4-testing/project-manager/src/app/model-driven-form/model-driven-form.component...

88 lines
2.5 KiB
HTML

<h2 *ngIf="!task.id">Neue Aufgabe anlegen</h2>
<h2 *ngIf="task.id">Aufgabe bearbeiten</h2>
<form novalidate [formGroup]="taskForm"
(ngSubmit)="saveTask(taskForm.value)">
<div class="form-group">
<label>Titel</label>
<input class="form-control" formControlName="title"/>
</div>
<pjm-show-error text="Titel" path="title"></pjm-show-error>
<div class="form-group">
<label>Beschreibung</label>
<textarea class="form-control" formControlName="description">
</textarea>
<pjm-show-error text="Beschreibung" path="description"></pjm-show-error>
</div>
<label>Tags</label>
<div formArrayName="tags">
<div *ngFor="let tag of tagsArray.controls; let i = index">
<div class="tag-controls" [formGroupName]="i">
<input class="form-control" formControlName="label">
<button class="btn btn-danger" (click)="removeTag(i)">
Tag entfernen
</button>
<pjm-show-error text="Ein Tag" path="tags.{{i}}.label"></pjm-show-error>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success" (click)="addTag()"> +</button>
</div>
<div class="form-group">
<label>Status</label>
<select formControlName="state" class="form-control">
<option *ngFor="let state of model.states" [value]="state">
{{model.stateTexts[state]}}
</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" formControlName="favorite">
Zu Favoriten hinzufügen
</label>
</div>
<br>
<h4>Zuständiger</h4>
<div formGroupName="assignee">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="name"/>
<pjm-show-error path="assignee/name" text="Name"></pjm-show-error>
</div>
<div class="form-group">
<label>E-Mail</label>
<input type="text" class="form-control"
formControlName="email"/>
<pjm-show-error path="assignee.email"></pjm-show-error>
</div>
<div *ngIf="taskForm.hasError('assigneeRequired')"
class="alert alert-danger">
Der Task befindet sich nicht mehr im Backlog <br>
Bitte geben Sie einen Zuständigen an.
</div>
</div>
<button type="submit"
class="btn btn-default"
[disabled]="!taskForm.valid">
Aufgabe speichern
</button>
</form>
<hr>
<button (click)="loadTask(1)"
class="btn btn-default">
Task 1 laden
</button>
<button (click)="loadTask(2)"
class="btn btn-default">
Task 2 laden
</button>