angular-forms

问题 I have a dynamic form in Angular 7 and the fields, control-type, visibility, validations, everything comes from the database. I know that for dynamic forms if the validations coming from the database are built in Angular validations, it is much easier to do, but what I would like to do is build a custom validation for the array of validations coming for each control-type and using eval, evaluate it to true/false and based on that show the corresponding error messages. This link wont work in

问题 I have a dynamic form in Angular 7 and the fields, control-type, visibility, validations, everything comes from the database. I know that for dynamic forms if the validations coming from the database are built in Angular validations, it is much easier to do, but what I would like to do is build a custom validation for the array of validations coming for each control-type and using eval, evaluate it to true/false and based on that show the corresponding error messages. This link wont work in

问题 i'm trying to get values from multiple checkbox here https://stackblitz.com/edit/angular-ivy-uahtjx i try this approach but didn't with for me https://stackblitz.com/edit/quiz-answer-value i think it's because the JSON schema is different, first one is array, and the second one is object. i set up my html like this <div *ngFor="let option of form.options"> <label><input (change)="onChange(i,j, form.code,check.checked)" #check [value]="answers[i].value.forms[j].answer.toString().indexOf(form

问题 I am trying to create a custom reactive form validation that allows me to pass an array of data to check if a string already exists. I am able to do it one way, so that it would be a form level validation but I can't get it to work on an individual form control. Form level validation This will create the error on the whole form, not just that control this.myForm = this.fb.group({ name: ['', Validators.compose([ Validators.required, ]), ], }, { validator: (formGroup: FormGroup) => this

问题 I have created a directive to focus an input if it's invalid import { Directive, Input, Renderer2, ElementRef, OnChanges } from '@angular/core'; @Directive({ // tslint:disable-next-line:directive-selector selector: '[focusOnError]' }) export class HighlightDirective implements OnChanges { @Input() submitted: string; constructor(private renderer: Renderer2, private el: ElementRef) { } ngOnChanges(): void { const el = this.renderer.selectRootElement(this.el.nativeElement); if (this.submitted &&

问题 On my frontend, I use an Angular (11) Material Datepicker element to let the user pick a date. The formatting for this is done using the MAT_DATE_LOCALE provider, and it is dd-MM-YYYY , so 23-12-2020 for today. This Datepicker is linked to a FormControl using reactive forms. While I am content with how the date is represented to the user, I'd like to send the date in a YYYY-MM-dd format. It seems the Datepicker is setting the value of the FormControl to a Date object and I don't know if I can

问题 Trying to check/uncheck all children checkboxes using ngModel and all checkboxes are checked, but also trying to check alone children and all checkboxes are always checked; <div> <input type="checkbox" [checked]="myVar1" (change)="myVar1 = !myVar1" /> Parent </div> <ul> <input type="checkbox" [(ngModel)]="myVar1" /> Child1<br> <input type="checkbox" [(ngModel)]="myVar1" /> Child2 </ul> Tried using [ngModelOptions]="{standalone: true}" property and it results with the same behaviour - all

问题 Is it possible that i will be able to add rows based on certain condition in Angular reactive forms? If yes, please help me do it. I've already started it in my stackblitz. Please check this link https://stackblitz.com/edit/dynamically-add-rows this.addForm.get("items").valueChanges.subscribe(val => { console.log(val); if (val === true) { this.addForm.get("items_value").setValue("yes"); // How to add row here? this.addForm.addControl(rows, 'rows') } if (val === false) { this.addForm.get(

问题 I've created component for datepicker that I want to use in many other components in my application. I have some problems becouse it doesn't change value of parent form group control. Lets get to the code: export class DatePickerComponent { @ViewChild('input', {read: ElementRef, static: false}) inputRef: ElementRef; @Input() formName?: FormGroup; @Input() formControlName: any; constructor() { this.formControlName.setValue(['']); } onKeyPress = (event) => { const pressedKey = event.keyCode; if

问题 I would like to simplify the code below: <div *ngIf="form1.errors?.checkDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger"> Date can't be in the future. </div> <div *ngIf="form1.errors?.notAfterDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger"> Birth Date must be after 1/1/1800. </div> It should have only 1 div *ngif and pass the error message as a value instead of hardcoding or use a ngFor ? Any