angular4-forms

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 have worked on angular 4 project, In this project, I have a requirement to set the first option as selected where all options are created dynamically by loop. html code: <select [(ngModel)]="selectedServiceType" [ngModelOptions]="{standalone: true}" (ngModelChange)="getServiceType($event)"> <ng-container *ngFor="let service of services"> <option [ngValue]="service">{{service.name}}</option> </ng-container> </select> If anyone know about let me know. Thanks in advance! Try like this : <select class="form-control" (change)="onChange($event)"> <option *ngFor="let service of services; let

I am trying to develop a contact form, I want user to enter phone number values between length 10-12. Notably same validation is working on Message field, Its only number field which is giving me trouble. I found this answer but it is of no use for me. I have code like following : HTML : <form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"> <input type="number" formControlName="phone" placeholder="Phone Number"> <input type="text" formControlName="message" placeholder="Message"> <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button> </form> TS : this.myForm = this

I am trying a nested reactive form in Angular 4. It is working fine but when I try to build AOT it's throwing the error 'controls' does not exist on type 'AbstractControl' I googled and tried few things but no luck. Could anyone tell me how to fix this issue? <div [formGroup]="myForm"> <div formArrayName="addresses"> <div *ngFor="let address of myForm.get('addresses').controls; let i=index" class="panel panel-default"> <span *ngIf="myForm.get('addresses').length > 1" (click)="removeAddress(i)">Remove</span> <div [formGroupName]="i"> <mat-form-field> <input matInput formControlName="city"

How do I get the value from the select option in Angular 4? I want to assign it to a new variable in the component.ts file. I've tried this but outputs nothing. Can you also do it using [(ngModel)]? component.html <form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm"> <div class="select"> <select class="form-control col-lg-8" #corporation required> <option *ngFor="let corporation of corporations" [value]="corporationObj">{{corporation.corp_name}}</option> </select> <button type="submit" class="btn btn-primary manage">Submit</button> </div> </form> component.ts HelloCorp() { const

I have a custom element : <div formControlName="surveyType"> <div *ngFor="let type of surveyTypes" (click)="onSelectType(type)" [class.selected]="type === selectedType"> <md-icon>{{ type.icon }}</md-icon> <span>{{ type.description }}</span> </div> </div> When I try to add the formControlName, I get an error message: ERROR Error: No value accessor for form control with name: 'surveyType' I tried to add ngDefaultControl without success. It seems it's because there is no input/select... and I dont know what to do. I would like to bind my click to this formControl in order that when someone clicks