Forms


search



<en-input type="text" [(ngModel)]="form.input" placeholder="input" name="input"></en-input>
<en-input type="email"
	[(ngModel)]="form.error"
	[placeholder]="'has error'"
	name="error"
	class="has-danger"></en-input>
<en-input type="text"
	[(ngModel)]="form.disabled"
	name="disabled"
	[placeholder]="'input disabled'"
	disabled></en-input>
<en-input type="text"
	name="search"
	[(ngModel)]="form.search"
	placeholder="search"
	(btnClick)="inputSearchClick($event)" addonRight>
		<i class="material-icons">search</i>
</en-input>
<!--textarea to standardowy element z klasami bootstrap-->
<div class="en-input-group">
	<textarea id="form.input.textarea" class="form-control en-form-control"
	name="textarea"
	cols="30"
	rows="10" [(ngModel)]="form.textarea" required></textarea>
	<label for="form.input.textarea">textarea</label>
</div>
<!--standardowy select box-->
<div class="en-input-group">
    <select class="form-control en-form-control custom-select" id="select.box">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <label for="select.box">select box std</label>
</div>
<br>
<div class="en-input-group">
  <select name="name" class="en-form-control custom-select w-100">
    <option [value]="'1'"> 1</option>
    <option [value]="'2'"> 2</option>
  </select>
  <label>default select</label>
</div>
<br>
<!--złożony select box-->
<en-select [options]="selectOptions"
label="compound select"
placeholder="placeholder">
</en-select>
        

@Component(...)
export class FormsPreviewComponent implements OnInit {
    constructor() {}
    ngOnInit() {}

    /*---------------------------------------------------------
     * FORMS
     *--------------------------------------------------------*/

    public form = {
        input:    'asd',
        search:   '',
        error:    'err',
        textarea: '',
        disabled: 'asdasd',
    };
    inputSearchClick(e: Event){
        // search box handler
    }

    /*----------------------------------------------------------
     * SELECTS
     *---------------------------------------------------------*/
    public selectOptions = [
        {
            label: 'nazwa',
            value: 'name'
        },
        {
            label:      'ulica',
            value:      'street',
            suboptions: [
                {
                    label: 'od A do Z',
                    value: 'asc'
                },
                {
                    label: 'od Z do A',
                    value: 'desc'
                }
            ]
        }
    ];
}






<en-checkbox label="Check this custom checkbox">
  <!--a normal input element with goes here, en-checkbox only wraps it in bs4 custom checkbox classes-->
  <input type="checkbox" class="custom-control-input"
         name="checkbox"
         [(ngModel)]="checkboxModel">
</en-checkbox>
<br><br>
<label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
    <input id="radio2" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span
    class="custom-control-description">Or toggle this other custom radio</span>
</label>
        
none