angular-reactive-forms

问题 How do I store Multiple Validators into a Constant and use in Reactive FormBuilder? The following will apply 1 validator. Store and Use Regex Const Validator in Angular 8 Reactive Formbuilder export const ZipValidation = Validators.pattern(/^\d{1,5}$/); 'ZipCode': [null, [Validators.maxLength(16), ZipValidation]], We need to store a whole multiple array into a constant. This is multiple validators for latitude and longitude. Validators.maxLength(32), Validators.min(-90), Validators.max(90),

问题 I am trying to develop a web application, which displays a set of questions to the user. Questions are segregated based on Categories . The application is developed using Angular6. Questions are fetched using the backend REST service. An interface is created on the client side which mocks the REST response structure, which has several subinterfaces to back the complex internal structure. The response will be mapped as a List of this interface. Following is the structure of the interface. My

问题 In code below <div *ngSwitchCase="'arraytext'" > <label class="col-sm-6" [formArrayName]="question.key" *ngFor="let order of form.controls.options.controls; let i = index"> <input type="checkbox" [formControlName]="i" class="form-control">{{order.value}} </label> </div> Here options is checkbox input for dynamic form and for another checkbox input may be option-2 . So my question is how to have form.controls.options.controls dynamic instead of using hard-coded options Demo. Here I managed to

问题 i am little confuse about push data into control because i using control inside nested control i have no idea how i push data inside the nested control this is my component.ts code mileStoneForm:FormGroup; constructor(private fb:FormBuilder) { this.mileStoneForm = this.fb.group({ milestone:this.fb.array([]) }); createMilestone() { return this.fb.group({ name:[''], date:[''], description:[''], value:[''], approval:[''], deliverable:this.fb.array([ this.createMilestoneDeliverable() ]) }); }

问题 I have a reactive form <form [formGroup]="secondFormGroup"> <ng-template matStepLabel>enter items</ng-template> <div style="display: flex; flex-direction: column;"> <mat-form-field> <input matInput type="text" placeholder="category" [(ngModel)]="newItem.CategoryName" formControlName="category" /> </mat-form-field> <mat-form-field> <input matInput type="text" placeholder="sub category" [(ngModel)]="newItem.SubCategoryName" formControlName="subCategory" /> </mat-form-field> <mat-form-field>

问题 I would like create reusable input group component with DE/EN data. I'm looking for, once all the mandatory fields are filled for EN and DE then submit button should get enabled. And also should get all the data in JSON format. Here the sample https://stackblitz.com/edit/angular-avjyct?file=app/app.component.ts I have been trying but stuck. Expert advise please? 回答1: Looks like you wanted to pass string value to your child component but passed undefined instead: [en]="label1_en" ^^^^^^^^^

问题 I have a reactive form in which I validate the different fields with ngif. For example: <mat-form-field> <input matInput formControlName="name" placeholder="Name"> <mat-error *ngIf="personForm.get('name').hasError('required')">Name is empty</materror> <mat-error *ngIf="personForm.get('name').hasError('minlength')">Needs more than 3 characters</mat-error> </mat-form-field> Would it be possible to do the same thing in a switch case statement and how would one go on about doing this? I imagened

问题 In This form I have to access the control of formControlName="last" to show errors of it. <div [formGroup]="form"> <div formGroupName="name"> <input formControlName="first" placeholder="First name"> <input formControlName="last" placeholder="Last name"> <span *ngIf="name['controls'].last.invalid">invalid</span> </div> <input formControlName="email" placeholder="Email"> <button type="submit">Submit</button> </div> This code has thrown an error 'controls' of undefined( Bold Formatted line ).

问题 I want to make a field disabled from ts file. it is working fine when I true/false statically. but I want to make it logically. when my form in edit mode I will make the fields editable. when the form in view mode will disable the fields. It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this

问题 I am creating a dynamic form using some configuration i am following a blog by Todd Motto Link Following is my form It contains nested FormGroups so my config contain a number of section. Section contains a number of fieldGroup and fieldGroup can contain a number of fields these fields are formControl, to this i am passing [group] (see ng-container) to this group i want to pass formGroup. Right now i am passing just a string <form class="dynamic-form" [formGroup]="form" (submit)="handleSubmit