تحويل الأشكال التفاعلية لـ Angular إلى أشكال مكتوبة بقوة في دقيقة واحدة

مرحبا هبر! أقدم انتباهكم إلى ترجمة مقال "التحويل إلى أشكال زاويّة مكتوبة بشدة في دقيقة واحدة" من تأليف 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».