According to the latest version of angular, the @angular/forms export the following things:
export {FormControlDirective} from './directives/reactive_directives/form_control_directive';
export {FormControlName} from './directives/reactive_directives/form_control_name';
export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
export {FormArrayName} from './directives/reactive_directives/form_group_name';
export {FormGroupName} from './directives/reactive_directives/form_group_name';
FormContolName
and FormControlDirective
, FormGroupName
and FormGroupDirective
, but FormArrayName
with no FormArrayDirective
, why?
The directive NgModel creates and manages a FormControl instance for a given form element.
The Index of the element is automatically assigned as the name for the element. Hence we use the [formGroupName]="i" where i is the index of the FormArray to bind the FormGroup to the div element. Finally, we add the controls using the formControlName directive. Finally, call the addSkills method to add new skills.
First, we need to import the FormArray from the Angular Forms Module. Build a formGroup orderForm using the FormBuilder. We define items as FormArray. We need to capture two fields under each item, the name of the item & description and price.
You just need to name the formControls inside your formArray .
I think that it's unnecessary. Well, you can create the directive, some like
@Directive({
selector: '[formArrayName]'
})
export class FormArrayDirective implements OnInit {
formArray: FormArray;
constructor(
private el: ElementRef,
@Host() @Optional() public form: FormGroupDirective
) {}
ngOnInit() {
this.formArray = this.form
? (this.form.form.get(
this.el.nativeElement.getAttribute('formArrayName')
) as FormArray)
: null;
}
}
Update before in form we has the FormGroupDirective, I think it's better to have the FormGroup
The new Directive
@Directive({
selector: '[formArrayName]'
})
export class FormArrayDirective implements OnInit {
formArray: FormArray;
form:FormGroup;
constructor(
private el: ElementRef,
@Host() @Optional() private formDirective: FormGroupDirective
) {}
ngOnInit() {
this.formArray = this.formDirective
? (this.formDirective.form.get(
this.el.nativeElement.getAttribute('formArrayName')
) as FormArray)
: null;
this.form=this.formDirective?this.formDirective.form:null
}
}
This directive exposes two properties: form
and formArray
, but be careful, you only can access this properties from a component that has a @ViewChild(FormArrayDirective)
in ngAfterViewInit
Curiosity, what is the aim to get it?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With