angular2-forms

问题 Here is my component class where I try to set a form radio button value to 1: import { FormGroup, FormControl } from '@angular/forms'; export class myComponent implements OnInit{ pageForm: FormGroup; ngOnInit() { this.pageForm = new FormGroup({ 'gndr': new FormControl(1) }); } } but when the page loaded the Radio button is not set to Male and both options are blank: <div class="form-group"> <label for="gender">Gender</label> <div class="radio"> <label> <input type="radio" name="gndr"

问题 Background Trying to get into the spirit of TypeScript, I am writing fully typed signatures in my Components and Services, which extends to my custom validation functions for angular2 forms. I know that I can overload a function signature, but this requires that the parameters are different for each return type because tsc compiles each signature to a separate function: function pickCard(x: {suit: string; card: number; }[]): number; function pickCard(x: number): {suit: string; card: number; }

问题 What do I have to return in the customerNameValidator if the async validation fails/succeeds that my 'customerName' FormControl is invalid? this.customerForm = this.formBuilder.group({ customerName: [this.newCustomerName, [Validators.minLength(2), Validators.required],[this.customerNameValidator.bind(this)]] }); customerNameValidator(c: AbstractControl) { return this.service.customerExists(c.value,this.companyId).subscribe(response => { if(response == true) { alert("true"); } else { alert(

问题 Basically I want to create a dynamic form with nested objects like the picture below: Pay offs are in an array on the model We should be able to add/remove pay offs as needed. The form should sync underlying form controls and model The number of pay offs is arbitrary and should be loaded into the form from the model There are no working examples that I could find as how to do this in Angular 2, although this was really easy to do in Angular 1. Below is my original question, I've since updated

问题 I created custom component representing password form control (code below is simplified). PasswordComponent (html) <form [formGroup]="passwordForm"> ... <input formControlName="password" type="password"> </form> PasswordComponent (ts) ... @Component({ selector: 'password', templateUrl: './password.component.html', styleUrls: ['./password.component.css'], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordComponent), multi: true }] }) export class PasswordComponent

问题 I use slick carousel as a component in my angular project ; this slick component is like below : @Component({ selector: 'slick-slider', template: ` <ng-content></ng-content>`, styleUrls:['./slick.component.css'] }) export class SlickSliderComponent implements AfterViewInit{ @Input() options: [any]; $element: any; constructor(private el: ElementRef) {} ngAfterViewInit() { this.$element = jQuery(this.el.nativeElement).slick(this.options); } } in the template of foodsComponent who use this slick

问题 I want to access particular json in ngOninit. So i have id on click in edit button and with the help of that id i am getting complete object from database like form name , form json which etc. So from the service i want to return that json to ngOninit. Here is service. GetFormById (id: number) { return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id).subscribe(data => { console.log(data); return data; }); } In console i am getting complete object from database which

问题 Before I used forms validation everything worked and my radio button group html looked like this: <div class="form-group row"> <label class="col-xs-6 col-form-label">{{getHalfScoresErrorsCount()}}</label> <div class="col-xs-6"> <span *ngFor="let answer of gradingKey.halfScoresCountAnswers"> <label class="form-check-inline"> <input class="form-check-input" type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)" [(ngModel)]="gradingKey.currentAnswer" [value]="answer"> {{answer

问题 I have a form in Angular 2 which is bound to a model. Now I want the changes in the model to rollback when the user hits cancel. How do I achieve this? 回答1: I'll repeat what was discussed in the comments (because I don't like unanswered questions on SO): For many use cases, you can probably use something very similar to the RestoreService that is discussed in the Hierarchical Injectors dev guide. For the OP's particular case, where the model is bound to another component and live form changes

问题 I have running the sample application to learn angular 2. In my sample application [(ngModel)] is not working. But when i removes the square brackets (ngModel) the screen is loading but two way binding is not working. should i do anything for making [(ngModel)] work. 回答1: Probably your code is missing this import line in your module: import { FormsModule } from '@angular/forms'; You also have to add FormsModule to module imports array: @NgModule({ imports: [FormsModule, /*...*/ ], //... }) 来源