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

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

источник

2016-11-07 ebakunin

Вы можете использовать [(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

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

источник

2016-11-07 06:49:41

задал аналогичный вопрос в Angular/Angular и два основных разработчика сказали мне, что смешивание ngModel и реактивных форм - плохая идея. Вы должны иметь возможность получить значения с помощью {{this.form.get ('first'). Value}} – Zuriel

@ Zuriel, но как я могу привязать локальные modeldata к моей форме, поэтому у меня есть двухсторонняя привязка данных для моей modeldata ? Потому что без вышеупомянутого решения мне нужно сопоставить мою формуда с моей modeldata – squadwuschel

https://angular.io/guide/reactive-forms В соответствии с реактивной парадигмой компонент сохраняет неизменность модели данных, рассматривая ее как чистый источник исходных значений. Вместо того, чтобы напрямую обновлять модель данных, компонент извлекает изменения пользователя и перенаправляет их на внешний компонент или службу, что делает что-то с ними (например, их сохранение) и возвращает новую модель данных компоненту, который отражает обновленное состояние модели. – Zuriel

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

источник

2017-10-20 07:32:30

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

ответ

Смежные вопросы