Mudanças entre as edições de "Model Driven Forms (Reactive forms) in Angular2"

De Basef
Ir para: navegação, pesquisa
Linha 1: Linha 1:
== In your Module: ==
+
=== In your Module: ===
  
 
<source lang="javascript">
 
<source lang="javascript">
Linha 7: Linha 7:
 
Add `ReactiveFormsModule` to `imports` section.
 
Add `ReactiveFormsModule` to `imports` section.
  
== In your Component: ==
+
=== In your Component: ===
  
 
<source lang="javascript">
 
<source lang="javascript">
Linha 41: Linha 41:
 
</source>
 
</source>
  
== In your template: ==
+
=== In your template: ===
  
 
<source lang="xml">
 
<source lang="xml">

Edição das 10h00min de 26 de outubro de 2016

In your Module:

import { ReactiveFormsModule } from '@angular/forms';

Add `ReactiveFormsModule` to `imports` section.

In your Component:

import { FormGroup, FormControl } from '@angular/forms';
 
export class MyComponent {
    myForm: FormGroup;
 
    constructor() {
        this.myForm = new FormGroup({
            field1: new FormControl(),
            field2: new FormControl()
        });
    }
}

or

import { FormGroup, FormBuilder } from '@angular/forms';
 
export class MyComponent {
    myForm: FormGroup;
 
    constructor(private fb: FormBuilder) {
        this.myForm = fb.group({
            'field1': '',
            'field2': ''
        });
    }
}

In your template:

<form [formGroup]="myForm">
    <input type="text" formControlName="field1" />
    <input type="text" formControlName="field2" />
</form>

or

<form [formGroup]="myForm">
    <input type="text" [formControl]="myForm.controls['field1']" />
    <input type="text" [formControl]="myForm.controls['field2']" />
</form>