angular-reactive-forms

I am using angular 7 appplication and i am writing a generic dynamic form creator. I am using reactive forms and ng-template and <ng-container *ngTemplateOutlet> for recursively displaying the form element.The code of the project could be seen Here . But i am facing the following error ERROR Error: Cannot find control with name: 'data' at _throwError (forms.js:1775) at setUpControl (forms.js:1683) at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4532) at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js

I am using Angular 4, Reactive forms.I want to show validation error message when the user clicks on Submit/Create Account button. Here is the HTML and typescript code that I am using. <form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <input type="text" id="firstname" name="firstname" formControlName="firstname" placeholder="First Name"> <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" class="help-block"> Please Enter First Name (Minimum 2 Characters)</span> </div> <div class="form-group"> <input type="text" id="lastname"

I am looking to update a formArray after the user adds a value in an empty created control. Currently when the user selects to add a new item i build onto the formArray with empty values. buildItem(item?: any, key?: any): FormGroup { // Item will pass undefined for initial buildItem in onLoad and new items let itemName: string; let keyValue: string; if (item === undefined) { itemName = ''; key = '' } else { itemName = item.name; keyValue = key }; /** * Builds a single item for form group array in the collectionForm. */ return this.formBuilder.group({ item: [itemName || '', Validators.required]

I need help with formArray validation in reactive form . I want validate each item in array, but i have no idea how can i do that. Thanks. html code: <label for="name">name:</label> <input formControlName="name" id="name" type="text"> <div *ngIf="name.invalid && (name.dirty || name.touched)"> <div *ngIf="name.errors.required"> required </div> </div> TypeScript code: createForm() { this.form = this.fb.group({ person: this.fb.array([this.initItemRows()]) }); } initItemRows() { return this.fb.group({ name: [''], info: [''] }); } addNewRow() { const control = <FormArray>this.form.controls['person'

I'm using Angular 4 with reactive forms. I have a form array that I am trying to tie to an array I keep track of in my component. I'm using reactive forms so I can have the validation, so I don't want to use the template forms approach. I add items to the form array like so: createFormWithModel() { this.orderForm = this.fb.group({ orderNumber: [this.order.ProductBookingOrder], orderDate: [this.order.PurchaseOrderIssuedDate], lineDetailsArray: this.fb.array([]) }) const arrayControl = <FormArray>this.orderForm.controls['lineDetailsArray']; this.order.ProductBookingDetails.forEach(item => { let

I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe. My pipe name is 'udpCurrency' The closest answer I could find on stack overflow was this one: Using Pipes within ngModel on INPUT Elements in Angular2-View However this is not working in my case and I suspect it has something to do with the fact that my form is reactive Here is all the relevant code: The Template <form [formGroup]="myForm" #f="ngForm"