angular2-forms

问题 I have an array on my backend called media that stores several objects. It looks something like this: "media": [ { "srcId": null; "primary": false, "thumbs": { "default": null }, "type": null, "raw": null } ] My edit-component.ts for the loading this array into the form looks like this: media: this._fb.array([ this._fb.group({ srcId: new FormControl(this.existingMedia.srcId), type: new FormControl(this.existingMedia.type), raw: new FormControl(this.existingMedia.raw), primary: new FormControl

问题 I dont know if this is a problem or normal behavior. If we have a form like this: <form #form="ngForm" > <div> <label>field1</label> <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar" /> </div> <div> <label>field2</label> <input type="text" name="field2" [(ngModel)]="someVar" /> </div> </form> In the same time variables mainVar and someVar are set to empty string in the component: mainVar = ''; someVar = ''; This will result in input with name field1 being disabled,

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 I have a directive that appends decimals, if the input value is a whole number, on blur. Below is the implementation. import { Directive, ElementRef, Input, OnInit, HostListener, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Directive({ selector: '[price]', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PriceDirective), multi: true } ] }) export class PriceDirective implements ControlValueAccessor {

问题 I have a select control that I want to disable dynamically based on a condition: this.activityForm = this.formBuilder.group({ docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required] }); However, docType doesn't become enabled even though at some point this.activeCategory becomes 'document'. How do I fix this? 回答1: Since I don't know how you're manipulating activeCategory (maybe it's also a FormControl ?), I'll suggest the following approach: You can use

问题 I have a select control that I want to disable dynamically based on a condition: this.activityForm = this.formBuilder.group({ docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required] }); However, docType doesn't become enabled even though at some point this.activeCategory becomes 'document'. How do I fix this? 回答1: Since I don't know how you're manipulating activeCategory (maybe it's also a FormControl ?), I'll suggest the following approach: You can use

问题 I failed to get an Angular 2 reactive form to work which has a FormGroup nested in a FormArray . Can somebody show me what is wrong in my setup. Unrelated parts of the code has been omitted for the brevity. Following is my component orderForm: FormGroup = this.fb.group({ id: [''], store: ['', Validators.required], //The part related to the error order_lines: this.fb.array([ this.fb.group({ id: [''], order_id: [], product_id: [], description: ['', Validators.required], unit_price: ['',