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

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


angular:angular2:forms:patchvalue_i_setvalue

patchValue() и setValue()

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

setValue

Методу setValue() должен передаваться объект, полностью повторяющий структуру описанной модели формы

    this.form.setValue({
      user:{
        pass:'123456',
        email: 'anchikin@mail.ru'
      },
      country: 'ru',
      answer: 'yes'
    });

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

patchValue

patchValue() может принимать лишь часть этой структуры, все «лишние» свойства будут проигнорированы.

    this.form.form.patchValue({
      user: {email : 'anchikin@mail.ru'}
    })

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

    this.form.form.patchValue(
      { user: {email : 'anchikin@mail.ru'} },
      {emitEvent: false}
    )

Полный пример

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}
    })
  }
}
angular/angular2/forms/patchvalue_i_setvalue.txt · Последние изменения: 2023/01/12 12:18 (внешнее изменение)