Mengubah Bentuk Reaktif Sudut menjadi Bentuk yang Sangat Diketik dalam Satu Menit

Halo, Habr! Untuk perhatian Anda, saya persembahkan terjemahan dari artikel "Ubah Menjadi Bentuk Sudut yang Sangat Diketik dalam Satu Menit" oleh Ajay Ojha.

Pada artikel ini, kita akan mempelajari cara mengubah formulir reaktif menjadi formulir yang diketik dengan kuat tanpa mengubah definisi kelas.

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