What is the alternative to ControlGroup and Control in Angular2 GA / Final Release?

I developed SPA in Angular2 RC1, however, since the release of the final version, my organization decided to port the code to Angular 2 GA. Although I could fix most broken things, I really struggle with forms.
In my previous code with RC1, I used ControlGroup and Control along with FormBuilder. I use them to execute regular forms, such as validating, adding and removing controls, etc. However, now, apparently, they have been deleted, and I have no idea what replaced them.
I tried several other classes from the FormControl or FormGroup API manual, but none of them helped. I would like to know what a replacement is for two classes.

Edit: FormControl and FormGroup fixed the errors in the TypeScript file, however, I get an error in the markup inline template:0:0 caused by: No provider for FormBuilder!.

UPDATE: I could use FormGroup, FormControl and FormBuilder. The above error was resolved by adding ReactiveFormsModule to the app.module.ts file. However, I get the error inline template:30:61 caused by: this.form._updateTreeValidity is not a function.
This particular line in the template <form #userForm="ngForm" (ngSubmit)="submitUser()" [formGroup]="userForm" novalidate autocomplete="off">

Any ideas?

+4
source share
1 answer

Updated to current Angular (v4.0.1)

FormGroupor FormBuilder. FormBuilderis just a short method for FormGroup. Therefore recommended for larger / more complex shapes.

, , , FormGroup, ngModel- #userForm="ngForm", , , - ... .

private myForm: FormGroup;

constructor(){
    this.myForm = new FormGroup({
        name: new FormGroup({
            first: new FormControl('Nancy', Validators.required),
            last: new FormControl('Drew')
        }),
        email: new FormControl('')
    });
}

//The same thing using 'FormBuilder': (Note this would not change the template)
constructor(@Inject(FormBuilder) fb: FormBuilder) {
    this.myForm = fb.group({
        name: fb.group({
            first: ['Nancy', Validators.required],
            last: 'Drew',
        }),
        email: '',
    });
}

:

<form [formGroup]="myForm" novalidate autocomplete="off">
    <div formGroupName="name" novalidate autocomplete="off">
        <input type="text" formControlName="first"/>
        <input type="text" formControlName="last"/>
        <span [hidden]="myForm.controls['name'].valid">Error</span>
    </div>
    <input type="text" formControlName="email"/>
</form>

Angular Driven Forms, [(ngModel)]="someInput"

+5

Source: https://habr.com/ru/post/1655582/


All Articles