angular-reactive-forms | 易学教程

Angular 2+ material mat-chip-list formArray validation

阅读更多关于 Angular 2+ material mat-chip-list formArray validation

How do I validate that a mat-chip has been added to the mat-chip-list . I am using ReactiveForms. I have tried with the required validator. The value can be a list of names, so I need to make sure that there is atleast 1 name in my list of names before I can submit the form. If the list is empty then mat-error should display the error message. Using the required validator makes the form invalid, regardless of adding names to the list. EDIT: Reactive Forms I have tried to make a custom validator, and I am now using Reactive Forms instead of Template driven forms, but I cannot get it to work. I

Angular 4 array validation

阅读更多关于 Angular 4 array validation

问题 I need help with formArray validation in reactive form . I want validate each item in array, but i have no idea how can i do that. Thanks. html code: <label for="name">name:</label> <input formControlName="name" id="name" type="text"> <div *ngIf="name.invalid && (name.dirty || name.touched)"> <div *ngIf="name.errors.required"> required </div> </div> TypeScript code: createForm() { this.form = this.fb.group({ person: this.fb.array([this.initItemRows()]) }); } initItemRows() { return this.fb

Angular material: mat-error not showing despite true methods

阅读更多关于 Angular material: mat-error not showing despite true methods

I have a confirm password formcontrol that I want to validate. I want to display my mat-error element when the password is not the same as the value in the confirm password input. For this I have a function called equalPasswords() . If the functions are the same then we receive true, if not, we receive false. <mat-form-field> <input matInput placeholder="Repeat password" [formControl]="password2" type="password"> <mat-error *ngIf="password2.invalid && password2.hasError('required')">Password is required</mat-error> <mat-error *ngIf="!equalPasswords() && !password2.hasError('required')"

What is the best practice to show Reactive Form Error Message without multiple *ngIf?

阅读更多关于 What is the best practice to show Reactive Form Error Message without multiple *ngIf?

问题 I am developing job form which contains job related fields and some of the fields have more than 5 validation. Here is my Html Code: <div [formGroup]="jobForm"> <div> <input type="text" formControlName="userName"/> <div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.required" class="alert alert-danger"> Required.... </div> <div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.maxLength" class="alert alert-danger"> max length 10 </div>

How to combine two parts of single form in angular?

阅读更多关于 How to combine two parts of single form in angular?

问题 I am making angular application with angular dynamic form where i am loading data for dynamic form through JSON.. JSON has two parts such as part 1 and part 2 , jsonDataPart1: 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": "textbox", "class": "col-12 col-md-4 col-sm-12", "key": "project_desc", "label":

Dynamic Validations in Angular 7: enable() & setValidators depending on flags triggered by changes

阅读更多关于 Dynamic Validations in Angular 7: enable() & setValidators depending on flags triggered by changes

问题 My last Angular project was a long time ago, I've worked with VueJS meanwhile. Now I am back and implemented a reactive form with some conditional fields in Angular 7. My solution below works, I can enable fields or set validators dependend on flags. But somehow I don't like this solution, it is too long and not intuitive. No one can intuit, that you have to disable a field to disable validators. Can an Angular/TypeScript expert help me to optimize that code or do it right way ? onChangeType

angular reactive form: pass child component value to parent component

阅读更多关于 angular reactive form: pass child component value to parent component

问题 im implementing reactive-form in angular. im unable to pass value from child to parent. example parent form: <div class="fields-wrap" [formGroup]="parent"> <div class="input-wrap"> <child-component></child-component> </div> <input type"button">Submit</div> </div> Child componet form: <div class="fields-wrap" [formGroup]="child"> <input type="text" formControlName="firstname" /> <input type="text" formControlName="lastname" /> <input type="text" formControlName="email" /> </div> how to get

Unable to typing more than 1 character in input for FormArray within a FormArray for Reactive Forms

阅读更多关于 Unable to typing more than 1 character in input for FormArray within a FormArray for Reactive Forms

I am thinking this could be a bug for Reactive Form. I would appreciate any help from more experienced Angular Experts. Symptom: Unable to key in more than 1 character in input at given time. Occurrence: When input is a FormArray within a FormArray I have included a Plunker link as below: https://embed.plnkr.co/zl2BQe/ . //app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [

Best way to associate checkbox control with textbox control

阅读更多关于 Best way to associate checkbox control with textbox control

I've been trying many different methods have been failing all week, I need to be able to associate a checkbox control with an answer. Pretty much, if the checkbox is checked then user must answer the question and it must have a validation of minlength 4. The checkbox will contain a question and answer. So if the user chooses that question he/she must provide an answer. the questions are rendered from the server in an object such as; { question_id: "1", selected: true, EN: "Question 1 - EN", FR: "Question 1 -FR", }, { question_id: "2", selected: false, EN: "Question 2 - EN", FR: "Question 2 -FR

Angular form updateValueAndValidity of all children controls

阅读更多关于 Angular form updateValueAndValidity of all children controls

问题 In my Angular 4 app, I have a form with several controls. At some points I need to force the update of their validity, so I'm doing: this.form.get('control1').updateValueAndValidity(); this.form.get('control2').updateValueAndValidity(); this.form.get('control3').updateValueAndValidity(); // and so on.... and then: this.form.updateValueAndValidity(); this works fine. However I was wondering if there is a better way to accomplish the same thing, by just calling one method on the parent form.