Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is there is no FormArrayDirective in @angular forms?

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?

like image 315
maxisacoder Avatar asked Aug 14 '17 08:08

maxisacoder


People also ask

Which directive is used for form in Angular?

The directive NgModel creates and manages a FormControl instance for a given form element.

How do I declare FormArray in FormGroup?

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.

How do you create FormArray in Angular 12?

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.

Can we use FormArray without FormGroup?

You just need to name the formControls inside your formArray .


1 Answers

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?

like image 185
Eliseo Avatar answered Nov 10 '22 17:11

Eliseo