angular-reactive-forms

As Angular documentation says we can use formControlName in our forms: <h2>Hero Detail</h2> <h3><i>FormControl in a FormGroup</i></h3> <form [formGroup]="heroForm" novalidate> <div class="form-group"> <label class="center-block">Name: <input class="form-control" formControlName="name"> </label> </div> </form> As they say... Without a parent FormGroup, [formControl]="name" worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent FormGroup, the name input needs the syntax formControlName=name in order to be associated with the correct

With the help of https://angular.io/guide/dynamic-form , i am making a dynamic form where i am in the need to display two fields at first. new TextboxQuestion({ key: 'firstName', label: 'First name', value: '', required: true, order: 1 }), new TextboxQuestion({ key: 'lastName', label: 'Last name', value: '', required: true, order: 2 }), These two fields needs to be at first on loading. After this i will have two buttons as add and remove . <button (click)="addNew()"> Add </button>     <button (click)="removeNew()"> Remove </button> <br><br> By clicking add, i need to display the next two

I am making angular dynamic form with form-elements loaded through JSON.. The form element generation are working fine, but i am in the need of change of form elements based on options selected from dropdown.. JSON that generates form-elements jsonData: any = [ { "elementType": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "project_name", "label": "Project Name", "type": "text", "value": "", "required": false, "minlength": 3, "maxlength": 20, "order": 1 }, { "elementType": "dropdown", "key": 'project', "label": 'Choose option to display', "options": [ { "key": 'description', "value":

i'm working in angular project where i want to show a table with two columns and dynamic row and last row conatins sum of each column when user type any number , this is what i want to achieve : element | FR | EN | ------------------- elem A | | | ------------------- elem B | | | ------------------- elem C | | | ------------------- Total | | | and this is my angular code : componenet.ts : listDecompositionLibelle: string[] = ['elem A', 'elem B','elem C']; ngOnInit() { this.valuesForm = this.fb.group({ decomposition : this.fb.array([ ]) }); for (let i = 0; i < 3; i++) { this

I am making angular application with angular dynamic form where i need to split up the form into two parts. In which i have input field firstname and lastname at first page and on click the next button the children which has email and dropdown needs to get loaded.. Html: <form (ngSubmit)="onSubmit()" [formGroup]="form"> <div *ngFor="let question of questions" class="form-row"> <ng-container *ngIf="question.children"> <div [formArrayName]="question.key"> <div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i"> <div *ngFor="let item of question.children"> <app

I am developing job form which contains job related fields and some of the fields have more than 5 validation. Here is my Html Code: <div [formGroup]="jobForm"> <div> <input type="text" formControlName="userName"/> <div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.required" class="alert alert-danger"> Required.... </div> <div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.maxLength" class="alert alert-danger"> max length 10 </div> <div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.exits" class="alert

I had a hard time implementing a custom validation in my reactive forms in Angular. I need to control the quantity. The quantity should not be more than the available quantity. The problem how can i get the total of all the quantity if each row has subrows. How will i able to compute the total of subrows and compare it to its parent row where the available quantity is found. Here's my code below. Here's also the link to my code PLEASE CLICK THIS LINK customValidator(campo1: string) { return (group: FormGroup): { [key: string]: any } => { const receive = group.controls[campo1]; //Change this