ng-devui-materials
Version:
Materials of DevUI Admin
162 lines (159 loc) • 6.66 kB
HTML
<da-layout-row [daGutter]="[24, 24]">
<da-col-item [daSpan]="24" [daXs]="24">
<div class="da-form">
<form dForm [layout]="columnsLayout" autocomplete="off">
<div class="grid">
<da-layout-col [daGutter]="[0, 0]" [daSpan]="24">
<da-row-item>
<da-layout-row [daGutter]="[0, 0]">
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label [required]="true">First Name</d-form-label>
<d-form-control class="form-control-width">
<input dTextInput name="userName" />
</d-form-control>
</d-form-item>
</div>
</da-col-item>
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label [required]="true">Last Name</d-form-label>
<d-form-control class="form-control-width">
<input dTextInput name="userName" />
</d-form-control>
</d-form-item>
</div>
</da-col-item>
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label [required]="true">Email</d-form-label>
<d-form-control class="form-control-width">
<input dTextInput name="email" />
</d-form-control>
</d-form-item>
</div>
</da-col-item>
</da-layout-row>
</da-row-item>
<da-row-item>
<da-layout-row [daGutter]="[0, 0]">
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label [required]="true">Team</d-form-label>
<d-form-control class="form-control-width">
<d-select
[options]="selectOptions"
name="select1"
[filterKey]="'label'"
[(ngModel)]="formData.selectValue"
></d-select>
</d-form-control>
</d-form-item>
</div>
</da-col-item>
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label [required]="true">Roles</d-form-label>
<d-form-control class="form-control-width">
<d-select
name="multiSelect"
[options]="selectOptions2"
[filterKey]="'label'"
[isSearch]="true"
[multiple]="true"
[extraConfig]="{
labelization: multipleSelectConfig.labelization
}"
[ngModel]="formData.multipleSelectValue"
></d-select>
</d-form-control>
</d-form-item>
</div>
</da-col-item>
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label>Labels</d-form-label>
<d-form-control class="form-control-width">
<d-tags-input
name="tag"
(click)="$event.stopPropagation()"
[displayProperty]="'label'"
[tags]="addedLabelList"
[placeholder]="'Add a tag'"
[suggestionList]="labelList"
>
</d-tags-input>
</d-form-control>
</d-form-item>
</div>
</da-col-item>
</da-layout-row>
</da-row-item>
<da-row-item>
<da-layout-row [daGutter]="[0, 0]">
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label>Duty day</d-form-label>
<d-form-control class="form-control-width">
<div
class="single-checkbox"
*ngFor="let option of checkboxOptions"
>
<d-checkbox
name="runDay"
[label]="option.label"
[isShowTitle]="false"
[ngModel]="option.checked"
></d-checkbox>
</div>
</d-form-control>
</d-form-item>
</div>
</da-col-item>
<da-col-item [daXs]="8" [daMs]="24">
<div class="u-1-3">
<d-form-item>
<d-form-label>Disclosure</d-form-label>
<d-form-control class="form-control-width">
<d-radio-group
name="schedule"
[cssStyle]="'column'"
[(ngModel)]="formData.radioValue"
>
<d-radio
*ngFor="let option of radioOptions"
[name]="'schedule'"
[value]="option.id"
>
{{ option.label }}
</d-radio>
</d-radio-group>
</d-form-control>
</d-form-item>
</div>
</da-col-item>
</da-layout-row>
</da-row-item>
</da-layout-col>
</div>
<d-form-operation>
<d-button
bsStyle="primary"
class="mr-element-spacing"
circled="true"
style="margin-right: 4px !important"
>Submit</d-button
>
<d-button bsStyle="common" circled="true">Cancel</d-button>
</d-form-operation>
</form>
</div>
</da-col-item>
</da-layout-row>