angular2-forms

问题 I have a angular 2 form wherein I have to make a field required on some condition like: description: ['', Validators.required] This description field will be required only on some type of a condition like: if(true){descReq = true}; How can I achieve this, please suggest. Thanks in advance! 回答1: You can add or remove a validator based on the the value of another control on the form: testForm: FormGroup; constructor(private formBuilder: FormBuilder) { this.testForm = this.formBuilder.group({

问题 I have seen couple of articles about this error, I have went through some but couldn't find the solution. Here i am calling alert method when my Boolean is true. The alert is coming perfectly when boolen is true but getting error in console. This is my template class: <ng-template #sessionSuccessModal let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class="modal-title">Include Criteria Error</h4> <button type="button" class="close" aria-label="Close" (click)="closeModel()"> <span

问题 I have to reset my form along with validation. is there any method to reset the state of form from ng-dirty to ng-pristine. 回答1: There doesn't seem to be support for that yet. A workaround I have seen is to recreate the form after submit which is obviously cumbersome and ugly. See also https://github.com/angular/angular/issues/6196 https://github.com/angular/angular/issues/4933 https://github.com/angular/angular/issues/5568 https://github.com/angular/angular/issues/4914 回答2: Here's how it

问题 I have the following HTML but i get the the exception. How to fix it ? Parser Error: Got interpolation ({{}}) where expression was expected at column 48 in [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)] <div class="form-group"> <label class="form-control-label" for="field_exportExpression">exportExpression</label> <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item

问题 For some weird reason, there are just no tutorials or code samples online showing how to use Angular2 Reactive forms with anything more than simple input or select dropdowns. I need to create a form to let users select their avatar. (Image file) The following doesn't work. (i.e. The Avatar property never shows any value changes.) profile.component.html: <form [formGroup]="profileForm" novalidate> <div class="row"> <div class="col-md-4 "> <img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}"

问题 I have noticed that if I disable a control on an Angular 2 reactive form then the control does not get included in the form.value. For example, if I define my form like below: this.notelinkingForm = new FormGroup({ Enabled: new FormControl(settings.Enabled, Validators.required), LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required), LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled

问题 I have run into an issue in pre-selecting values on a dropdown list in Angular 2. I set an array of colours in the component which I bind successfully to the dropdown list. The issue I'm experiencing is with pre-selecting a value on page init. The line [selected]="car.color.id == x.id" should be selecting the value which has been set on the car model this.car.color = new Colour(-1,''); however this only works when I set the car colour id to the last item in the list (in this case black) this

问题 I have some simple angular 2 component with template. How to clear form and all fields after submit?. I can't reload page. After set data with date.setValue('') field is stil touched . import {Component} from 'angular2/core'; import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common'; @Component({ selector: 'loading-form', templateUrl: 'app/loadings/loading-form.component.html', directives: [FORM_DIRECTIVES] }) export class LoadingFormComponent { private

问题 i'm tring to add validator to FormContol dynamic (not on initialization) and it's not work.... the code: this.formGroup.controls["firstName"].validator = Validators.Required; Did anyone do it? 回答1: Try this, it should work this.formGroup.controls["firstName"].setValidators(Validators.required); For multiple validators this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]); But doing so will override any validators that are provided during

问题 Given a list of checkboxes bound to the same formControlName , how can I produce an array of checkbox values bound to the formControl , rather than simply true / false ? Example: <form [formGroup]="checkboxGroup"> <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" /> <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" /> <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" /> </form> checkboxGroup