Двустороннее связывание в реактивных формах

используя Angular 2, двусторонняя привязка проста в формах, управляемых шаблоном - вы просто используете синтаксис banana box. Как бы вы воспроизвели это поведение в форме, управляемой моделью?

например, вот стандартная реактивная форма. Давайте притворимся, что это намного сложнее, чем кажется, с большим количеством различных входов и бизнес-логики, и поэтому более подходит для подхода, основанного на модели, чем на шаблоне.

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 в шаблоне. Как я могу это сделать?

21
angular angular2-formbuilder angular2-forms

4 ответов

можно использовать [(ngModel)] с реактивными формами.

<form [formGroup]="form">
  <input name="first" formControlName="first" [(ngModel)]="example.first"/>
  <input name="last" formControlName="last" [(ngModel)]="example.last"/>
</form>

export class App {
  form: FormGroup;
  example = { first: '', last: '' };

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      first: '',
      last: ''
    })
  }
}

Plunker

это будет совершенно другая директива, чем та, которая будет использоваться без the formControlName. С реактивными формами это будет FormControlNameDirective. Без formControlName на NgModel директива будет использоваться.

32

иногда вам может потребоваться объединить [(ngModel)] с реактивными формами. Я могу быть некоторым inputcontrol, который вам не нужен как часть формы, но вам все равно нужно привязать его к контроллеру. Тогда вы можете использовать:[(ngModel)]="something" [ngModelOptions]="{standalone: true}"

6

Если вы просто хотите показать входное значение, просто создайте переменную в своем входе и используйте ее в своем шаблоне.

... множество других входов 
    <h4>Example values: {{ name.value }}</h4>
0

поддержка с использованием ngModel свойство ввода и ngModelChange событие с реактивной формы директивы deprecated в угловой В6 и будет удалено в угловом v7.

enter image description here

Так согласно угловому направляющему выступу мы можем иметь 3 варианта:

  1. использование активных форм.
  2. на основе шаблонов использования формы.
  3. отключите это предупреждение, предоставив конфигурацию для ReactiveFormsModule.

источник:https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

0