angular-forms

I have a form on a component's template: <form (ngSubmit)="submitLogin(loginForm)" #loginForm="ngForm"> <mat-input-container> <input matInput [placeholder]="'User Name'" ngModel name="username" autofocus required> </mat-input-container> <br> <mat-input-container> <input matInput [placeholder]="'Password'" ngModel type="password" name="password" required> </mat-input-container> <br> <button [disabled]="loginForm.invalid" mat-raised-button type="submit"> Login </button> </form> And here is my component's submit handler: public submitLogin(loginForm: NgForm) { return this.authService.login

I have a series of forms (each managed by 1 component). There is a pattern of inputs in these forms (e.g. many of them require to allow input of an address) that I have to refactor into re-usable components as they are used in multiple forms and I don't want to duplicate neither their logic nor their templates. Each re-usable component would have to have its logic have its template containing input tags and no <form> tag have its client validation constraints possibly receive initial values from its parent be able to return the value of its fields to the parent as an object (e.g. address:

I am creating a dynamic form based on Angular 4 Dynamic Forms . Everything is working out great! However, I have run into an issue with the dropdown. I would like to have a dependent dropdown. When the user selects a value in the dropdown it will display checkboxes, based on an attribute - possibly name . service new DropdownInput({ key: 'dropdown', label: 'Dropdown Testing', options: [ {key: 'example1', value: 'Example 1'}, {key: 'example2', value: 'Example 2'} ], order: 1 }), new CheckboxInput({ key: 'checkbox1', label: 'checkbox1 - example1', name: 'example1', order: 2 }), new CheckboxInput

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 have two components: ParentComponent and ChildComponent: parent.component.ts <form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate> <input type="text" name="firstControl" [(ngModel)]="firstControl" /> <input type="text" name="secondControl" [(ngModel)]="secondControl" /> <child-component> </form> {{form.value | json}} child.component.ts <input type="text" name="thirdControl" [(ngModel)]="thirdControl" /> <input type="text" name="fourthControl" [(ngModel)]="fourthControl" /> Now, {{form.value | json}} returns { "firstControl": "", "secondControl": "" } and it's clear. My question is: Is

Using ngx-bootstrap Datepicker in an Angular 4 application, I know that normally you can specify the date format this way: <input id="from" name="from" bsDatepicker [(bsValue)]="myModel" value="{{ myModel | date:'yyyy-MM-dd'}}"> but this time I'm inside a template-driven Angular form, so my input is not bound to a variable like myModel in the example above, but it's just bound to the form: <input id="from" name="from" bsDatepicker ngModel> so how can I specify the date format in this case? Edit : it looks like that a way to achieve this is by creating a new variable newVar inside the component