ng2-encrm-components/src/app/example-form/example-form.component.html

angular 2 components

<div class="container m-t-2">
  <h3>Formularz Przykładowy</h3>
  <br>
  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <div class="row">
      <div class="col-xs-8">
        <en-input type="text" [placeholder]="'Nazwa firmy w standardzie Eniro:'"
                  [formControl]="form.controls['company_name']"></en-input>
      </div>
      <div class="col-xs-4">
        Typ adresu: Adres niestandardowy
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-6">
        <en-input type="text" [placeholder]="'Ulica'"
                  [formControl]="form.controls['street']"></en-input>
      </div>
      <div class="col-xs-12 col-lg-6">
        <div class="row">
          <div class="col-xs-3">
            <en-input type="number" [placeholder]="'Nr domu'"
                      [formControl]="form.controls['house_num']"></en-input>
          </div>
          <div class="col-xs-3">
            <en-input type="number" [placeholder]="'Nr lokalu'"
                      [formControl]="form.controls['appartment_num']"></en-input>
          </div>
          <div class="col-xs-6">
            <en-input type="text" [placeholder]="'Dzielnica'"
                      [formControl]="form.controls['district']"
                      disabled></en-input>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-4">
        <en-input type="text" [placeholder]="'Kod pocztowy'"
                  [formControl]="form.controls['post_office_code']"></en-input>
      </div>
      <div class="col-xs-12 col-lg-4">
        <div class="en-input-group">
          <select class="custom-select en-form-control" id="county_input">
            <option>Ursynowski</option>
          </select>
          <label for="county_input">Powiat</label>
        </div>
      </div>
      <div class="col-xs-12 col-lg-4">
        <div class="en-input-group">
          <select class="custom-select en-form-control" id="commune_input">
            <option>Mokotowska</option>
          </select>
          <label for="commune_input">Gmina</label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <label class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description">Zgadzam się na przetwarzanie moich danych osobowych w celu zapanowania nad światem.</span>
        </label>
        <br><br>
        <fieldset class="form-group">
          <legend>Czy na pewno chcesz zapanować nad światem?</legend>
          <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">Tak</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">Nie</span>
          </label>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 text-xs-center">
        <span class="en-btn en-btn-primary">Zapisz</span>
        <span class="en-btn en-btn-secondary">Anuluj</span>
      </div>
    </div>
  </form>
</div>