Winkelreaktive Formen in einer Minute in stark typisierte Formen verwandeln

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "In einer Minute in stark typisierte Winkelformen umwandeln" von Ajay Ojha.

In diesem Artikel erfahren Sie, wie Sie eine reaktive Form in eine stark typisierte Form umwandeln, ohne die Klassendefinition zu ändern.

TypeScript . , Angular . Angular . - «any», , ..

, Angular. , , . «», .

frontend- , . , , , , , - .

:

1. ;
2. valueChanges statusChanges FormControl ;
3. FormGroup  FormArray - .

(FormGroup, FormControl FormArray), . , :

1. FormBuilder  FormControl, FormGroup  FormArray;
2. ;
3. , FormGroup , @angular/forms.

, .

? ?

, .

?

@rxweb/types. , , - .

, FormControl  FormGroup  FormArray. FormGroup.

export class AppComponent implements OnInit { 
    formGroup: FormGroup;
    formBuilder: FormBuilder;
    constructor(formBuilder: FormBuilder) { 
        this.formBuilder = formBuilder; 
    } 
    ngOnInit() { 
        this.formGroup = this.formBuilder.group({
            firstName: ['', [Validators.required]], 
            address: this.formBuilder.group({ 
                countryName: ["", Validators.required] 
            }),
            skills: this.formBuilder.array([ 
                this.formBuilder.group({ 
                    name: ["", Validators.required] 
                })
            ])
        });
    }
}

.

1.

npm install @rxweb/types

2.

. :

User >> firstName, address, skills; Address >> countryName; Skill >> name.

3.

:

1. IFormGroup: API FormGroup;
2. IFormBuilder: FormGroup, FormControl FormArray.

:

import { IFormGroup, IFormBuilder } from “@rxweb/types”;

4.

:

1. FormGroup IFormGroup;
2. FormBuilder IFormBuilder;
3. group<User>, group<Address> array<Skill>.

, , .

:

formGroup: IformGroup<User>;
formBuilder: IformBuilder;
ngOnInit() {
    this.formGroup = this.formBuilder.group<User>({
        firstName: ['', [Validators.required]],
        address: this.formBuilder.group<Address>({
            countryName: ["", Validators.required]
        }),
        skills: this.formBuilder.array<Skill>([
            this.formBuilder.group({
                name: ["", Validators.required]
            })
        ])
    });
}

, .

/,

API . . .

, , . , , , , , - , «New Way to Validate the Angular Reactive Form».