angular-reactive-forms

问题 In db table, I have "key_name" which is successfully returning in API and working great. What I want to do is to set those fields value as a formControlName in html and in component I am using the reactive form so I have tried formArrayName . Based on the change event I am pushing new formControl in categoryArray and assigning its key as db field's value. here is my Html: <div class="col-md-6"> <div formArrayName="categoryArray" *ngFor="let type of types; let k = index"> <div [formGroupName]=

问题 I have a Mat Select dropdown with the following values from an Object List. export class Product { productId: number; productCode: string; productDescription: string; } The Mat select List is meant to emit the Whole object as follows: <mat-form-field> <mat-select formControlName="productData" [compareWith]="compareProductObjects" <mat-option>Select</mat-option> <mat-option *ngFor="let productItem of ProductList" [value]="productItem"> {{productItem.productDescription}} </mat-option> <mat

问题 I have gone through plenty of threads saying that one needs to unsubscribe from FormControl#valueChanges to prevent memory leaks. I understood the "when" and "how" to unsubscribe from Observable s. As I understand, Observables that produce infinite number of values need to be unsubscribed and FormControl#valueChanges is one such Observable . But my question is, why aren't these Observables s garbage collected? I mean when an Angular component gets destroyed, the references are dead right? The

问题 I have gone through plenty of threads saying that one needs to unsubscribe from FormControl#valueChanges to prevent memory leaks. I understood the "when" and "how" to unsubscribe from Observable s. As I understand, Observables that produce infinite number of values need to be unsubscribed and FormControl#valueChanges is one such Observable . But my question is, why aren't these Observables s garbage collected? I mean when an Angular component gets destroyed, the references are dead right? The

问题 I am using Angular 5 with Reactive forms and need to make use of the valueChanges in order to disable required validation dynamically component class: export class UserEditor implements OnInit { public userForm: FormGroup; userName: FormControl; firstName: FormControl; lastName: FormControl; email: FormControl; loginTypeId: FormControl; password: FormControl; confirmPassword: FormControl; ... ngOnInit() { this.createFormControls(); this.createForm(); this.userForm.get('loginTypeId')

问题 I am dynamically populating drop downs and it's values. After selecting all the value when I click on the submit button I am not able to set it's value in form, I am getting blank values. HTML: <div class="col-md-6" *ngFor="let type of types"> <div class="form-group"> <label>Select {{ type.cat_name }}</label> <select class="form-control custom-select" (change)="onChangeType($event.target.value)" [value]="type.key_name" > <option value="">-- Select --</option> <ng-container *ngFor="let subType

问题 I am dynamically populating drop downs and it's values. After selecting all the value when I click on the submit button I am not able to set it's value in form, I am getting blank values. HTML: <div class="col-md-6" *ngFor="let type of types"> <div class="form-group"> <label>Select {{ type.cat_name }}</label> <select class="form-control custom-select" (change)="onChangeType($event.target.value)" [value]="type.key_name" > <option value="">-- Select --</option> <ng-container *ngFor="let subType

问题 I have an input whose value should be based on dropdown selected. here is my code <div class="col-sm-9"> <nb-select type="number" fullWidth id="service" formControlName="service"> <nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option> </nb-select> </div> <input type="number value="service.price"> My .ts file Services: Array<any>=[ {name: 'Consultation', price: 100}, {name: 'Follow Up', price: 200}, {name: '24 Hrs. Creatinine', price: 300}, {name: 'Complete

问题 I have an input whose value should be based on dropdown selected. here is my code <div class="col-sm-9"> <nb-select type="number" fullWidth id="service" formControlName="service"> <nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option> </nb-select> </div> <input type="number value="service.price"> My .ts file Services: Array<any>=[ {name: 'Consultation', price: 100}, {name: 'Follow Up', price: 200}, {name: '24 Hrs. Creatinine', price: 300}, {name: 'Complete

问题 i have used formArray to loop the values and on selection of one item, we can move right and left based on which side we have selected.Here, i am selecting last item from right and moving to left, then i select last but one and move that to left. Then the duplicate value has come. I think it is due to index value mismatch. I am not able to rectify this issue. can anyone help me out to solve this. DEMO: Working Demo HTML: <div class="card-body overflow-auto py-0" formArrayName=