一分钟即可将Angular的反应形式转换为强类型

哈Ha！我提请您注意Ajay Ojha撰写的文章“在一分钟内转换为强类型的角形式”的翻译。

在本文中，我们将学习如何在不更改类定义的情况下将反应形式转换为强类型形式。

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».