angular:angular2:forms:patchvalue_i_setvalue []

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

Для программного задания форме значений используются методы ''patchValue()'' и ''setValue()''.\\

====setValue====

Методу ''setValue()'' должен передаваться объект, полностью повторяющий структуру описанной модели формы
<code javascript>
    this.form.setValue({
      user:{
        pass:'123456',
        email: 'anchikin@mail.ru'
      },
      country: 'ru',
      answer: 'yes'
    });
</code>

Если ''setValue()'' передать "неполную" модель - будет сгенерирована ошибка.

====patchValue====
''patchValue()'' может принимать лишь часть этой структуры, все "лишние" свойства будут проигнорированы.
<code javascript>
    this.form.form.patchValue({
      user: {email : 'anchikin@mail.ru'}
    })
</code>

Вторым параметром оба метода принимают объект, с помощью которого, например, можно сделать так, чтобы установка значения рективной формы Angular не инициировала событие valueChanges.

<code javascript>
    this.form.form.patchValue(
      { user: {email : 'anchikin@mail.ru'} },
      {emitEvent: false}
    )
</code>

----

====Полный пример====
<code javascript>
import {Component, ViewChild} from '@angular/core';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-root',
  template: `
    <div class="col-xs-8 col-xs-offset-2">
      <form (ngSubmit)="submitForm()" #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>
            <button type="button" class="btn btn-primary" (click)="addRandEmail()">Добавить случайный email</button>
          </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>

        <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>
        <button type="button" (click)="autoComplete()"  class="btn btn-success">автозаполнение</button>
      </form>
      <div *ngIf="isSubmited">Форма была отправлена
      <pre>
        {{formData|json}}
      </pre>
      </div>

    </div>
  `
})
export class AppComponent {


  @ViewChild('myForm') form: any;

  answers = [{
    type: 'yes',
    text: 'Да'
  }, {
    type: 'no',
    text: 'Нет'
  }];

  defaultAnswer = 'no';
  defaultCountry = 'ru';

  formData = {};
  isSubmited = false;

  submitForm(){
    this.isSubmited = true;
    this.formData = this.form.value;
    this.form.reset();
    console.log('submit', this.form);
  }

  autoComplete(){
    this.form.setValue({
      user:{
        pass:'123456',
        email: 'anchikin@mail.ru'
      },
      country: 'ru',
      answer: 'yes'
    });
  }
  addRandEmail(){
    const randEmail = 'anchikin@mail.ru';
    this.form.form.patchValue({
      user: {email : randEmail}
    })
  }
}

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

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

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