Questions tagged reactive-forms

Explore the latest questions and answers asked by our top developers.

Angular removing Validators.min from form control validation

I have a form with 2 fields: select dropdown (2 option): with validation, without validation an input amount field depending on the first dropdown I have validators on the 2nd field: Validators.required, Validators.min(0.1). Im trying to use clearValidators() to remove the validation but it only removes the required but not the min(0.1) How do I […]

Validation of NG-ZORRO select dropdown doesn’t work

I have a NG-ZORRO reactive form. I have an issue adding Validation to my select The form looks like the following: <nz-form-control nzErrorTip="{{formValidatorSvc.getErrorMessage(form.get(‘type’).errors)}}"> <nz-form-label nzFor="type" nzRequired>Deal Type</nz-form-label> <nz-select nzAllowClear name="type" formControlName="type"> <nz-option *ngFor="let t of types" [nzLabel]="t" [nzValue]="t" ></nz-option> </nz-select> </nz-form-control> <nz-form-control nzErrorTip="{{formValidatorSvc.getErrorMessage(form.get(‘agreement’).errors)}}"> <nz-form-label nzFor="agreement" nzRequired>Agreement Name</nz-form-label> <input nz-input name="agreement" formControlName="agreement"> </nz-form-control> And this is […]

By Cheng Shi
Published
Categorized as angular, ng-zorro-antd, reactive-forms Tagged , ,

Angular Reactive Forms map only part of object to formControlName

I have a select input that chooses from a list of objects, displays a name, and also binds it into a form’s field. However, I need that whole object available for the change event. Changing formControlName is not really an option. HTML: <form [formGroup]="form"> <!– Here I can access $event.target.value to obtain just the userName […]

Building form from json with repeatable inputs: Cannot find control with path formArray

I’m trying to build a form based on a json. I have a backend using Spring boot that returns the following object to an angular front app: { "controls": [ { "name": "genre", "type": "radio", "radioOptions": [ { "key": "1", "value": "Mr." }, { "key": "2", "value": "Ms." } ], "validators": {} }, { "name": […]

Type ‘AbstractControl | null’ is not assignable to type ‘NgIterable<any> | null | undefined’

my component.ts code is forms = new FormGroup({ topics: new FormArray([]), }); addTopic(topic: HTMLInputElement) { (this.refForm as FormArray).push(new FormControl(topic.value)); // topic.value = ”; } get refForm() { return this.forms.get(‘topics’); } and .html file has following code. <form [formGroup]="forms"> <input type="text" class="form-control" (keyup.enter)="addTopic(topic)" #topic /> <ul class="list-group"> <li *ngFor="let topic of forms.get(‘topics’)"> class="list-group-item"> {{ topic.value }} […]

By Munawar Hassan
Published
Categorized as angular, reactive-forms Tagged ,

Angular Reactive Form Control only observes input from first form control

I am trying to build a reactive form using a form builder class. I am noticing that it is only observing the validators of the first name form control and it is only observing the changes of the the first name class. This is the relevant TS code but I have also built a stackblitz […]

By Rhett Harrison
Published
Categorized as angular, reactive-forms, typescript Tagged , ,

How to typecast from AbstractControl to FormGroup in template?

I have a component that takes FormGroup as @Input. parentComponent: parentGroup = fb.group({ childGroup: fb.group({ nestedControl: fb.control([]) }) }) <app-my-component [formGroup]="myGroup"> Then in the child component I have: @Input formGroup: FormGroup <div *ngIf="formGroup.controls.childGroup.controls.nestedControl === true"> some content </div> I get an error error TS2339: Property ‘controls’ does not exist on type ‘AbstractControl’. I guess the […]

By user6269972
Published
Categorized as angular, reactive-forms Tagged ,

Blank page when adding formgroup variable in reactive form Angular

When I add I declare my variable Public Contact:FormGroup when running the ng serves my application appears only a blank page, however no error appears in the terminal Quando eu declaro a minha variável Public Contact:FormGroup ao rodar o ng serve minha aplicação aparece apenas uma página em branco, porém não aparece nenhum error no […]

Why is FormArray not assignable to NgIterable<any>?

I tried to pass a FormArray into a component. This component template iterates over FormArray and displays data. It allows the user to add to the array or remove items. ChildComponent ts @Input() public formArray!:FormArray; Then in the template I try: <div class="formRow child2" *ngFor="let year of formArray; let i=index"> List Number #{{i+1}} &nbsp; &nbsp; […]

Angular. Reactive form two way data binding

After data loaded i call reInit form. After manipulate with data from html template class didn’t updated and at this moment i use this: Object.assign(this.customer, this.customerForm.getRawValue()); But I know that this is bad solution, and each every key and update data by conditions isn’t good way. Maby some easy way exists? I have some class, […]

1 11

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq