angular-forms

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused. I have tried a few ways found on StackOverflow with directive or so, but can't succeed. Here is the sample code: @Component({ selector: 'my-app', template: ` <div> <h2>Hello</h2> </div> <button (click) ="showSearch()">Show Search</button> <p></p> <form> <div > <input *ngIf="show" #search type="text" /> </div> </form> `, }) export class App implements AfterViewInit { @ViewChild('search') searchElement: ElementRef; show: false;

I have an Angular 2 application that uses the ReactiveForms module to manage a form that uses a custom validator. The validator receives a FormControl object. I have a few input fields that could use the same custom validator if only I knew the name of the field when the FormControl was passed to the validator. I can't find any method or public property on FormControl that exposes the input field's name. It's simple enough to see its value, of course. The following shows how I would like to use it: public asyncValidator(control: FormControl): {[key: string]: any} { var theFieldName = control

I know that similar questions have been asked, but I've found none with a good answer. I want to create a select list in an Angular form, where the value for each option is an object. Also, I do NOT want to use 2 way data binding. e.g. if my Component has these fields: lUsers: any[] = [ { Name: 'Billy Williams', Gender: 'male' }, { Name: 'Sally Ride', Gender: 'female'} ]; curUser: any; I would like my HTML template to contain this: <select #selectElem (change)="setNewUser(selectElem.value)"> <option *ngFor="let user of lUsers" [ngValue]="user"> {{user.Name}} </option> </select> With this code,

I want to create a single big form with angular 2. But I want to create this form with multiple components as the following example shows. App component <form novalidate #form1="ngForm" [formGroup]="myForm"> <div> <address></address> </div> <div> <input type="text" ngModel required/> </div> <input type="submit" [disabled]="!form1.form.valid" > </form> Address component <div> <input type="text" ngModel required/> </div> When I use the code above it was visible in the browser as i needed but the submit button was not disabled when I delete the text in address component. But the button was

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

I am working on Angular 4 Web API Here when selecting an option it will display packingtypename its working fine. but my problem is when clicking add button it will only save the packingtypeID i want Packing type id and packing type name Here i want to like this when selecting a PackingTypeName automatically pass their ID to API. which means when selecting a packing type Name and press add button the selected Name and its ID can be saved to DB. actually, I am new in angular. can anyone help please its a big help form me my Html code is <label>Packing Type</label> <select class="form-control"