angular4-forms

I a working on angular 4.4 + material beta12 custom component and not able to figure out what is wrong in my implementation I am trying to achieve the below custom input Task: set value to formControl, once I got data from server(data.productTeam is data-can see in code) on edit, formcontrol should be updated with values (eg:P12DT2H231M) Issues: I am not able to bind default value to formcontrol. Without ngDefaultControl (No value accessor for form control with name: 'productTeam' error occuring) dashboard.component.js this.CRForm = this.fb.group({ productTeam: [data.productTeam || ''] }); In

I want to submit form to external site by POSTing the input fields in old school way(non Ajax) , it submits too but Angular giving me error in console before jumping to external page. I used following code in HTML(template) <form (submit)="onSubmit($event)" method="POST" [formGroup]="form" *ngIf='form' action="https://www.sandbox.paypal.com/cgi-bin/webscr" > In component onSubmit(obj: any) { if (!this.form.valid) { this.helper.makeFieldsDirtyAndTouched(this.form); } else { this.loader = true; // save data in online_payment_ipn this.paymentService.saveOnlinePaymentIpn({}, 'paypal') .subscribe

I'm using angular 4 forms and I have some fields. and first_name, last_name and company are really important for me. I want to force the user to fill one of these 3 fields. how can I do it? here are .ts codes: this.contactForm = this.fb.group({ first_name: [null, Validators.compose([Validators.required])], last_name: [null, Validators.compose([Validators.required])], email: [null, Validators.compose([this.validateEmail])], company: [null], position: [null], }); an html: <form [formGroup]="contactForm" fxLayout="column"> <md-input-container class="data_light"> <input class="data_font capital"

I want to fetch all checked items of a form in component without using change() or click() function as it is unable to fetch already checked items. Here is my Array in TS: PartyRoles = [ { Id: 1, Name: "Vendor", Checked: true }, { Id: 2, Name: "Client", Checked: true }, { Id: 3, Name: "Consigner", Checked: false } ] My HTML Form: <form (ngSubmit)="editPartyRolesSubmit()"> <div *ngFor="let item of PartyRoles"> <label> <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" /> <span innerHTML="{{item.Name}}"></span>

I have a few custom directives which are basically designed for <input> . And I have a custom component <app-decorated-input> There are a ton <app-decorated-input> s along with simple <input> s in my application for some of which I like to use the directives and for others I don't. How do I pass on the directives to the underlying <input> when the directive is used like so: <app-decorated-input directive1 directive2 ></app-decorated-input> and have the same effect of the directives on the underlying <input> as if it were used directly on it: <input type="text" directive1 directive2 > UPDATE:

I am new with angular 4, I am trying to configure bootstrap. I installed ng-bootstrap: https://ng-bootstrap.github.io/#/getting-started I did all like on the page, but I don't see the bootstrap on my page. Here is my code: src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, // add this NgbModule