angular - example - Unión bidireccional en formas reactivas.

ngmodel and reactive forms

Question

Al usar Angular 2, el enlace bidireccional es fácil en formularios controlados por plantillas: solo se usa la sintaxis de la caja de banano. ¿Cómo replicaría este comportamiento en una forma basada en modelos?

Por ejemplo, aquí hay una forma reactiva estándar. Supongamos que es mucho más complicado de lo que parece, con muchas y muchas entradas y lógica de negocios, y por lo tanto, más apropiado para un enfoque basado en modelos que en un enfoque basado en plantillas.

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);
        }
    });
}

En el subscribe() puedo aplicar todo tipo de lógica a los valores del formulario y mapearlos según sea necesario. Sin embargo, no quiero asignar cada valor de entrada desde el formulario. Solo quiero ver los valores de todo el modelo de employee medida que se actualiza, en un enfoque similar a [(ngModel)]="example.name" , y tal como se muestra en el canal de json en la plantilla. ¿Cómo puedo lograr esto?

Answer 1

Nota: como lo menciona @Clouse24 , "el uso de Reactivos desde con ngModel está obsoleto en el ángulo 6 y se eliminará en el ángulo 7" (lo que significa que la respuesta a continuación ya no será compatible a partir de la versión 7). Lea el enlace para ver el razonamiento de la desaprobación y para ver qué alternativas tendrá.

Puedes usar [(ngModel)] con formas reactivas.

<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

Esta será una directiva completamente diferente a la que se usaría sin formControlName . Con las formas reactivas, será FormControlNameDirective . Sin formControlName , se NgModel directiva NgModel .

Answer 2

A veces es posible que necesite combinar [(ngModel)] con formas reactivas. Podría ser un control de entrada que no necesita como parte del formulario, pero aún necesita estar enlazado al controlador. Luego puede usar: [(ngModel)]="something" [ngModelOptions]="{standalone: true}"

Answer 3

Si solo desea mostrar un valor de entrada, simplemente cree una variable en su entrada y úsela en su plantilla.

... muchas otras entradas

    <h4>Example values: {{ name.value }}</h4>