angular:angular2:forms:ngmodelgroup []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

=====NgModelGroup=====

**NgModelGroup** - Создает и привязывает экземпляр FormGroup к элементу DOM.\\
\\
Эта директива может использоваться только как дочерний элемент NgForm (в тегах формы).\\
\\
Используйте эту директиву, чтобы проверить подгруппу вашей формы отдельно от остальной части вашей формы.\\
\\
Укажите имя подгруппы, и оно станет ключом для подгруппы. Если вам нужен прямой доступ, экспортируйте директиву в локальную переменную шаблона с помощью ngModelGroup (например: #user="ngModelGroup").

<code javascript>
      <div class="col-xs-8 col-xs-offset-2">
      <form (ngSubmit)="submitForm(myForm)" #myForm="ngForm">
        <div ngModelGroup="user" #user="ngModelGroup">
          <div class="form-group" [ngClass]="{'has-error': email.invalid && email.touched}">
            <label>Email</label>
            <input email required ngModel name="email" type="text" #email="ngModel" class="form-control">
            <p class="help-block" *ngIf="email.invalid && email.touched">Введите корректный email</p>
          </div>
          <div class="form-group" [ngClass]="{'has-error': pass.invalid && pass.touched}">
            <label>Пароль</label>
            <input required ngModel #pass="ngModel" name="pass" type="password" class="form-control">
            <p class="help-block" *ngIf="pass.invalid && pass.touched">поле пароль не должно быть пустым</p>
          </div>
        </div>

        <h2 *ngIf="user.invalid && user.touched">Данные пользователя введены неккоректно</h2>

        <div class="form-group">
          <label>Выберите страну</label>
          <select required [ngModel]="defaultCountry" name="country" class="form-control">
            <option value="ru">Россия</option>
            <option value="by">Белоруссия</option>
            <option value="ua">Украина</option>
          </select>
        </div>
        <div class="radio" *ngFor="let ans of answers">
          <label>
            <input required [ngModel]="defaultAnswer" name="answer" type="radio" [value]="ans.type"> {{ans.text}}
          </label>
        </div>
        <button [disabled]="!myForm.valid" class="btn btn-success" type="submit">Сохранить</button>
      </form>
    </div>
</code>

{{ :angular:angular2:forms:screen4.png |}}\\
\\
{{ :angular:angular2:forms:screen5.png |}}

Инструменты пользователя

Инструменты сайта

Инструменты страницы