Exibir código-fonte para Model Driven Forms (Reactive forms) in Angular2

A complete guide to reactive forms: [http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html Thoughtram - Model Driven Forms in Angular 2]

=== 1) In your Module: ===

<source lang="javascript">
import { ReactiveFormsModule } from '@angular/forms';
</source>

Add `ReactiveFormsModule` to `imports` section.

=== 2) In your Component: ===

<source lang="javascript">
import { FormGroup, FormControl } from '@angular/forms';

export class MyComponent {
    myForm: FormGroup;

    constructor() {
        this.myForm = new FormGroup({
            field1: new FormControl(),
            field2: new FormControl()
        });
    }
}
</source>

or

<source lang="javascript">
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class MyComponent {
    myForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.myForm = fb.group({
            'field1': ['', Validators.required],
            'field2': ['']
        });
    }
}
</source>

=== 3) In your template: ===

These are similar to ngModel of Angular1:

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


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

[[Category: AngularJS2]]