angular-reactive-forms

问题 I have built a form using the Reactive Forms technique available in Angular 2. The form has many controls of different types. Now I need to add an undo button to it. I have been able to set up a basic undo button using the click and change events. I'm saving the previous value when someone clicks the form control and storing that value to Local Storage when the control's value is changed. However, this method has some drawbacks. For example, when someone tabs into the control, the click event

问题 I got a component like this @Component({ selector: 'app-custom-form-control', templateUrl: '<input>', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true } ] }) export class CustomFormControlComponent implements ControlValueAccessor {...} As you see it's a custom form control. I use it in a component which I'm going to test. @Component({ selector: 'app-root', templateUrl: '<div [formGroup]="form"> <app-custom-form-control formControlName="my

问题 I try to dynamically add Roles to my User/Roles-application. I have a Formarray where i can show the Roles of the User in the Edit View. And there is a button for adding more Roles to the User. But when i press the button "Add Role", i got this error message: ERROR Error: Cannot find control with path: 'rolesArr -> 1 -> name' In this example, i try to add more than one Role to a User that i want to create. Here is my Code: users-edit.component.html (excerpt) <div formArrayName="rolesArr" >

问题 I have a form that is using a directive called ng-select which enhances select inputs. In my setup, I allow a user to make some selections and then click on a "Filter" button. Upon clicking this button, I disable the input. HTML: <div class="form-group"> <div class="input-group"> <ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true" [items]="getCostCenters()" placeholder="Select one or more Cost Centers"> </ng

问题 I am developing an application with Angular 4, Bootstrap 4 and ngbootstrap. The html code - <div class="container"> <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)"> <div class="form-group"> <div class="row"> <legend class="col-form-legend col-sm-2">Required</legend> <div class="btn-group col-sm-2" ngbRadioGroup name="isRequired" formControlName="isRequired"> <label ngbButtonLabel class="btn-primary"> <input ngbButton type="radio" name="radio" [value]="true">Yes </label>

问题 Consider the following demo https://stackblitz.com/edit/angular-pur1dt I have reactive form control with sync validator and error message shown below the field when it is invalidated. Validation is triggered when control loses focus. Below the control there is a button that has a click handler. The problem is that when I click the button, control loses focus, validation happens, error message shown and moves the button down. And supposedly this prevents click handler from executing. Any

问题 I am making angular application with angular dynamic form where i need to split up the form into two parts. In which i have input field firstname and lastname at first page and on click the next button the children which has email and dropdown needs to get loaded.. Html: <form (ngSubmit)="onSubmit()" [formGroup]="form"> <div *ngFor="let question of questions" class="form-row"> <ng-container *ngIf="question.children"> <div [formArrayName]="question.key"> <div *ngFor="let item of form.get

问题 Please assist, I have nested form array, se below : this.form = this.formBuilder.group({ projectTitle: ['', [Validators.required, Validators.maxLength(300)]], projectDescription: ['', [Validators.required, Validators.maxLength(300)]], funding: this.formBuilder.array([this._buildFundingItems()]), }); the this._buildFundingItems() is as follows private _buildFundingItems(): FormGroup { return this.formBuilder.group({ items: ['', [Validators.required, Validators.pattern(this.regexValidation

问题 I have a very simple problem which I can't get it. First, I have an ingredient which has an approved quantity. And that ingredient has several expiration dates. However, I want to check if my expiration dates which has the "quantity to transfer" is not more than the approved quantity. How should I check this? I already finished some parts BUT this one I couldn't compare since it has to check several rows of "quantity to transfer" against the one approved quantity. Here's the code link below:

问题 In Angular , is there a way to identify which FormGroup / FormControl in a dynamic FormArray emitted the valueChanges event? My FormArray is dynamic. It starts out empty and users could add a FormGroup to the FormArray by clicking a button. When valueChanges, I need to re-validate the control. Since I dont know which control emitted the event, I loop through the entire FormArray and validate all FormGroup / FormControl even though only one control changed - and this is every time when