angular-reactive-forms

I have an dynamic array of department list fetched from server. I want to push that array to form array on initialization, basically i want to show checkboxes based on department name or id in array. I know how to push an empty array in reactive forms.but how to initialize with an existing array.Actually its an update/edit Component departmentList:any=[]; //array contains all departments SelectedDeptList:any=[]; //fetched from db , selected departments userForm: FormGroup; this.userForm = this.fb.group({ //fb form builder 'phone': [null], 'departmentList': this.fb.array([this.createDepartment(

I would like to create a custom form element with ControlValueAccessor interface in Angular 2+. This element would be a wrapper over a <select> . Is it possible to propagate the formControl properties to the wrapped element? In my case, the validation state is not getting propagated to nested select as you can see on the attached screenshot. My component is available as following: const OPTIONS_VALUE_ACCESSOR: any = { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OptionsComponent) }; @Component({ providers: [OPTIONS_VALUE_ACCESSOR], selector: 'inf-select[name]',

I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid . In both validation cases below the checkbox is interface ValidationResult { [key:string]:boolean; } export class CheckboxValidator { static checked(control:Control) { return { "checked": control.value }; } } @Component({ selector: 'my-form', directives: [FORM_DIRECTIVES], template: ` <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"> <input type=

are reactive forms the way to go in order to have a component that can listen for changes in the validity status of the form it contains and execute some compoment's methods? It is easy to disable the submit button in the template using templateRef like [disabled]="#myForm.invalid" , but this does not involve the component's logic. Looking at template forms' doc I did not find a way Sravan If you want to get only the status and not the value you can use statusChanges : export class Component { @ViewChild('myForm') myForm; this.myForm.statusChanges.subscribe( result => console.log(result) ); }

I am trying to build a nested reactive form in Angular 5. I am able to push items at one level, but unable to push item at second level. ngOnInit() { this.orderForm = this.formBuilder.group({ customerName: '', email: '', items: this.formBuilder.array([this.createItem()]) }); } createItem(): FormGroup { return this.formBuilder.group({ name: 'a', description: 'b', price: 'c', //subItems: this.formBuilder.array([this.createSubItem()]) }); } //createSubItem(): FormGroup { //return this.formBuilder.group({ //subname: 'abc' //}); //} addItem(): void { this.items = this.orderForm.get('items') as