hs.hsadmin.ng/src/main/webapp/app/entities/asset/asset-update.component.html

<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-asset-heading" jhiTranslate="hsadminNgApp.asset.home.createOrEditLabel">Create or edit a Asset</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!asset.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="asset.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.documentDate" for="field_documentDate">Document Date</label>
                    <div class="input-group">
                        <input id="field_documentDate" type="text" class="form-control" name="documentDate" ngbDatepicker  #documentDateDp="ngbDatepicker" [(ngModel)]="asset.documentDate"
                        required/>
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="documentDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                    <div [hidden]="!(editForm.controls.documentDate?.dirty && editForm.controls.documentDate?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.documentDate?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.valueDate" for="field_valueDate">Value Date</label>
                    <div class="input-group">
                        <input id="field_valueDate" type="text" class="form-control" name="valueDate" ngbDatepicker  #valueDateDp="ngbDatepicker" [(ngModel)]="asset.valueDate"
                        required/>
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="valueDateDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                    <div [hidden]="!(editForm.controls.valueDate?.dirty && editForm.controls.valueDate?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.valueDate?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.action" for="field_action">Action</label>
                    <select class="form-control" name="action" [(ngModel)]="asset.action" id="field_action"  required>
                        <option value="PAYMENT">{{'hsadminNgApp.AssetAction.PAYMENT' | translate}}</option>
                        <option value="HANDOVER">{{'hsadminNgApp.AssetAction.HANDOVER' | translate}}</option>
                        <option value="ADOPTION">{{'hsadminNgApp.AssetAction.ADOPTION' | translate}}</option>
                        <option value="LOSS">{{'hsadminNgApp.AssetAction.LOSS' | translate}}</option>
                        <option value="CLEARING">{{'hsadminNgApp.AssetAction.CLEARING' | translate}}</option>
                        <option value="PAYBACK">{{'hsadminNgApp.AssetAction.PAYBACK' | translate}}</option>
                    </select>
                    <div [hidden]="!(editForm.controls.action?.dirty && editForm.controls.action?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.action?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.amount" for="field_amount">Amount</label>
                    <input type="number" class="form-control" name="amount" id="field_amount"
                        [(ngModel)]="asset.amount" required/>
                    <div [hidden]="!(editForm.controls.amount?.dirty && editForm.controls.amount?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.amount?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.controls.amount?.errors?.number" jhiTranslate="entity.validation.number">
                            This field should be a number.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.remark" for="field_remark">Remark</label>
                    <input type="text" class="form-control" name="remark" id="field_remark"
                        [(ngModel)]="asset.remark" maxlength="160"/>
                    <div [hidden]="!(editForm.controls.remark?.dirty && editForm.controls.remark?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.remark?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" [translateValues]="{ max: 160 }">
                        This field cannot be longer than 160 characters.
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="hsadminNgApp.asset.membership" for="field_membership">Membership</label>
                    <select class="form-control" id="field_membership" name="membership" [(ngModel)]="asset.membershipId"  required>
                        <option *ngIf="!editForm.value.membership" [ngValue]="null" selected></option>
                        <option [ngValue]="membershipOption.id" *ngFor="let membershipOption of memberships; trackBy: trackMembershipById">{{membershipOption.documentDate}}</option>
                    </select>
                </div>
                <div [hidden]="!(editForm.controls.membership?.dirty && editForm.controls.membership?.invalid)">
                    <small class="form-text text-danger"
                        [hidden]="!editForm.controls.membership?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                    </small>
                </div>
            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>