angular-reactive-forms | 易学教程

Best way to implement Angular cross field validation

阅读更多关于 Best way to implement Angular cross field validation

问题 I am trying to figure out the best way to implement cross field validation in Angular. For example, I have a select field that makes another field mandatory. I want to be able to: Change the border color of the field if it is invalid Display a * in front of the field whenever it becomes mandatory Display a specific error message that explains what validation rule is broken. So far, I came up with three solutions but they don't feel so convincing to me. Listen to select field changes and

returning null in Angular 2 custom validator throwing an error

阅读更多关于 returning null in Angular 2 custom validator throwing an error

问题 <div class="col-md-6"> <div class="form-group"> <h6>Email Address</h6> <input type="text" class="form-control" name="email" formControlName='Bemail' required> <div [hidden]="BusinessInfoForm.controls.Bemail.valid || (BusinessInfoForm.controls.Bemail.pristine && !submitted)" > <p class="text-danger" [hidden]="!BusinessInfoForm.controls.Bemail.errors.required">mailAddressis required.</p> <p class="text-danger" [hidden]="!BusinessInfoForm.controls.Bemail.errors.incorrectMailFormat">Email format

Angular Reative Forms > User customized forms error

阅读更多关于 Angular Reative Forms > User customized forms error

问题 I am trying to implement a feature on my angular app where the users will be able to create their own forms (selecting fields/validation/etc). Once they create the form, I'll store it's JSON structure on the DB for use later: export interface FormModel { id: string; name: string; type: 'group' | 'control'; children: FormModel[]; isArray: boolean; } A sample structure is this: [{ id: 'users', name: 'Users', type: 'group', isArray: true, children: [ { id: "user", name: "User", type: 'group',

Angular dynamic form with groups of elements getting from JSON

阅读更多关于 Angular dynamic form with groups of elements getting from JSON

问题 I am making angular application and building of angular dynamic form. Here i am trying to split of form in two parts such as Person Name and Personal details.. For Person Name its working for grouping but for Personal details its not working. The Html : <div *ngIf="form"> <div *ngFor="let question of questions" class="form-row" [formGroup]="form"> <ng-container *ngIf="!question.children"> <app-question [question]="question" [form]="form"></app-question> </ng-container> <ng-container *ngIf=

Angular Forms not working on live server

阅读更多关于 Angular Forms not working on live server

问题 **I have used Reactive Form but its not working on live but on local it is working fine. The page gets refreshed while submitting the form. There is no error in console. ** I am new to Angular 4, any help will be highly appreciated. Functionality is listed below: signup.html <form [formGroup]="signupuser" (ngSubmit)="signup(signupuser)"> <div class="form-group"> <input formControlName="first_name" type="text" class="form-control" placeholder="First Name" maxlength="25" trim > <span class="for

Dynamic Columns Reactive Forms in Angular

阅读更多关于 Dynamic Columns Reactive Forms in Angular

问题 How can i add several columns if i add the "click here to add transportation field" like i want to add driver, contact number etc.... Once you click the modal, it will show you some options on what field to add. Please check the code link that I've made. here's also my codes below. Please check also the image here CHECK THIS LINK https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts openModal(template: TemplateRef < any > ) { this.modalRef = this

Dynamic Columns Reactive Forms in Angular

阅读更多关于 Dynamic Columns Reactive Forms in Angular

How can i add several columns if i add the "click here to add transportation field" like i want to add driver, contact number etc.... Once you click the modal, it will show you some options on what field to add. Please check the code link that I've made. here's also my codes below. Please check also the image here CHECK THIS LINK https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts openModal(template: TemplateRef < any > ) { this.modalRef = this.modalService.show(template); } initGroup() { let rows = this.addForm.get('rows') as FormArray; rows.push(this

Angular 5 - Reactive Forms

阅读更多关于 Angular 5 - Reactive Forms

问题 I am working on the reactive forms and I am not able to get the specifically the form control which has changed or updated from UI rather getting the whole form . I tried using valueChanges() but it returns the full form itself rather than giving me the specific changed form control . I tried using the valueChanges() method but no getting what i am expecting 回答1: You can subscribe to specific form control rather than the entier form lie this way this.form.get('userName').valueChanges(value=>

Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected

阅读更多关于 Setting errors on a FormGroup instance in Angular Reactive Forms not working as expected

问题 I'm using Angular 4.4.3 reactive forms to implement custom validation for a group of controls in a form. The method AbstractControl.setErrors, according to docs updates the errors property of the AbstractControl, upon which it's invoked, updates the status of its parent, but not the parents errors property. I wanted to set the errors property on a FormGroup instance, so I use the setErrors inherited by the FormGroup. However, it does not update errors as expected. Following is my sample code:

Buliding dropdown/select dynamically via reactive forms angular 6

阅读更多关于 Buliding dropdown/select dynamically via reactive forms angular 6

问题 I have multiple (any number) dropdowns on the form that i need to build dynamically. All these must have a value selected, so need to apply required validator. Sample json [ { "FeatureCaption": "Style", "SelectedValue": "shaker", "FeatureList": [ { "FeatureId": "CHOOSE", "FeatureName": "Choose", "IsSelected": true }, { "FeatureId": "shaker", "FeatureName": "Shaker", "IsSelected": false } ] }, { "FeatureCaption": "Material", "SelectedValue": "std", "FeatureList": [ { "FeatureId": "CHOOSE",