Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
Для программного задания форме значений используются методы patchValue() и setValue().
Методу setValue() должен передаваться объект, полностью повторяющий структуру описанной модели формы
this.form.setValue({ user:{ pass:'123456', email: 'anchikin@mail.ru' }, country: 'ru', answer: 'yes' });
Если setValue() передать «неполную» модель - будет сгенерирована ошибка.
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} }) } }