Используя Angular 2, двусторонняя привязка проста в формах, управляемых шаблонами - вы просто используете синтаксис банановых ящиков. Как бы вы реплицировали это поведение в форме, управляемой моделью?
Например, здесь приведена стандартная реактивная форма. Предположим, что это намного сложнее, чем кажется, с множеством различных входов и бизнес-логики и, следовательно, более подходящим для подхода, ориентированного на модель, чем подход, основанный на шаблонах.
export class ExampleModel {
public name: string;
// ... lots of other inputs
}
@Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name">
... lots of other inputs
</form>
<h4>Example values: {{example | json}}</h4>
`
})
export class ExampleComponent {
public form: FormGroup;
public example: ExampleModel = new ExampleModel();
constructor(private _fb: FormBuilder) {
this.form = this._fb.group({
name: [ this.example.name, Validators.required ]
// lots of other inputs
});
}
this.form.valueChanges.subscribe({
form => {
console.info('form values', form);
}
});
}
В subscribe() я могу применять все виды логики к значениям формы и отображать их по мере необходимости. Однако я не хочу отображать каждое входное значение из формы. Я просто хочу увидеть значения для всей модели employee по мере ее обновления в подходе, аналогичном [(ngModel)]="example.name", и как показано в json-канале в шаблоне. Как я могу это сделать?
