angular-reactive-forms

问题 I am making angular dynamic form with form-elements loaded through JSON.. The form element generation are working fine, but i am in the need of change of form elements based on options selected from dropdown.. JSON that generates form-elements jsonData: any = [ { "elementType": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "project_name", "label": "Project Name", "type": "text", "value": "", "required": false, "minlength": 3, "maxlength": 20, "order": 1 }, { "elementType": "dropdown

问题 StackBlitz Here is my FormArray (variants): this.productGroup = this.fb.group({ name: '', variants: this.fb.array([ this.fb.group({ type: '', options: '' }) ]) }) I'm using MatChips to store a string array. This array needs to be passed to options : <div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;"> <div [formGroupName]="i"> <div class="row"> <mat-form-field class="col-12"> <input formControlName="type"> </mat-form-field> </div> <div

问题 I had a hard time implementing a custom validation in my reactive forms in Angular. I need to control the quantity. The quantity should not be more than the available quantity. The problem how can i get the total of all the quantity if each row has subrows. How will i able to compute the total of subrows and compare it to its parent row where the available quantity is found. Here's my code below. Here's also the link to my code PLEASE CLICK THIS LINK customValidator(campo1: string) { return

问题 I am trying to apply Error Validation style with ControlValueAccessor in custom Material Input Textbox. Ever since applying this custom component, all the red border validation status with formControlName/FormBuilders do not show, for required, minlength, etc. It worked natively (out of the box) with Angular Material textbox, until the custom control was applied. Goal is to have custom textbox working with Form validation. This showed naturally with matInput textbox. Update: Posted answer;

问题 I have two arrays of data: AssociatedPrincipals (previously saved data) and ReferencePrincipals (static data to populate in dropdown controls). I'm struggling to get the previous value from AssociatedPrincipals to be displayed/selected in a dynamic amount (most examples use a single dropdown) of dropdowns on page load. I'm not certain how to set up the form (code behind and HTML), especially setting the Select's formControlName. Currently, the static values in each dropdown populate, but I

问题 I would like to create a custom form element with ControlValueAccessor interface in Angular 2+. This element would be a wrapper over a <select> . Is it possible to propagate the formControl properties to the wrapped element? In my case, the validation state is not getting propagated to nested select as you can see on the attached screenshot. My component is available as following: const OPTIONS_VALUE_ACCESSOR: any = { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() =>

问题 I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid . In both validation cases below the checkbox is interface ValidationResult { [key:string]:boolean; } export class CheckboxValidator { static checked(control:Control) { return { "checked": control.value }; } } @Component({ selector: 'my-form', directives: [FORM

问题 I am using Angular 7, Angular Material controls with Reactive Forms. I created custom text (matInput type="text"), number (matInput type="number"), select (matSelect) controls with Angular Material with mat-form-field Here is the stackblitz for my example. I am trying to attach the custom form controls to reactive form and trying to fire any validations on the form group automatically. I am using ControlValueAccessor to achieve this, however my Select is not being identified as form control

问题 I have several categories and each category has several materials/products. I have a problem since when i decided to delete a material/product on a category, I also delete a material/product in another category? How would able to fix this using reactive forms? How would i independently delete one material only and not another? This is the link to my code CODE LINK patchValues() { let rows = this.myForm.get('rows') as FormArray; this.orders.forEach(material => { material.materials.forEach(x =>

问题 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({