angular-reactive-forms

问题 is there a way to create a reactive form basing on an existing data model with all the validation magic. In the example below author passes whole new object into a formbuilder but what I want to achieve is elegant way to tell formbuilder what field is required or needs some other validation. https://malcoded.com/posts/angular-fundamentals-reactive-forms export class PersonalData { email: string = ''; mobile: string = ''; country: string = ''; } ... createFormGroupWithBuilderAndModel

问题 Let's say that I have this form structure: this.entryForm = this.formBuilder.group({ date: [{value:'' , disabled: true}, [Validators.required]], notes: [''], sum_credit: [{value:'', disabled: true }], sum_debit: [{value:'', disabled: true}], items: this.initItems() }); // set validation function to sum_credit this.entryForm.controls['sum_credit'].setValidators([CommonValidations.validateSomthing(...)]); The sum_credit is disabled because it's value is always calculated. Now I need to validate

问题 I want to generate a reactive form from the tree structure. Here is the code that creates the form items (form groups and controls). For the controls nested in form group it I use a recursive template. import { Component, Input, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; @Component({ selector: 'form-item', template: ` <ng-container [formGroup]

问题 I have a large form to create and decided to use the reactive form feature for ease of use. However, I am facing a few challenges that might be obvious and looking for help. Below are two cases that yield the same outcome with the exception of the validation. The createFormWithValidation() method specifics every control and it's associated validators. The createFromPassingObject() method creates the same form using just the this.party object but without the added validators. My goal is to

问题 Working with angular 7 and Bootstrap 4, I want to wrap my bootstrap 4 inputs in a custom component in order to reduce the boilerplate in my templates. I want that the final main component look like: <form [formGroup]="myForm" (submit)="submit(myForm.value)"> <app-form-control label="Lastname" placeholder="Lastname" formControlName="lastName"></app-form-control> <app-form-control label="Firstname" placeholder="Firstname" formControlName="firstName"></app-form-control> <button class="pull-right

问题 I am trying to implement a custom validator function to check either of the Phone numbers(Home Phone and Mobile) are entered or not. I want to show the error message on both the fields when they are both touched and not have the valid value, for some reason my code is not working as anticipated. Please help me with this piece. -Thanks! Here is the stackblitz link https://stackblitz.com/edit/angular-ve5ctu createFormGroup() { this.myForm = this.fb.group({ mobile : new FormControl('', [this

问题 I have 2 input fields: name and last name. I have 2 buttons: submit and 'add a person'. Clicking on 'add a person' should add a new set of fields (name and last name). How to achieve that? I found solutions how to add single input fields dynamically, but here I need to add a set My code now without 'add a person' functionality: import { FormControl, FormGroup, Validators } from '@angular/forms'; export class AppComponent implements OnInit { form: FormGroup; constructor(){} ngOnInit(){ this

问题 I'm using Angular 4 with reactive forms. I have a form array that I am trying to tie to an array I keep track of in my component. I'm using reactive forms so I can have the validation, so I don't want to use the template forms approach. I add items to the form array like so: createFormWithModel() { this.orderForm = this.fb.group({ orderNumber: [this.order.ProductBookingOrder], orderDate: [this.order.PurchaseOrderIssuedDate], lineDetailsArray: this.fb.array([]) }) const arrayControl =

问题 As Angular documentation says we can use formControlName in our forms: <h2>Hero Detail</h2> <h3><i>FormControl in a FormGroup</i></h3> <form [formGroup]="heroForm" novalidate> <div class="form-group"> <label class="center-block">Name: <input class="form-control" formControlName="name"> </label> </div> </form> As they say... Without a parent FormGroup, [formControl]="name" worked earlier because that directive can stand alone, that is, it works without being in a FormGroup. With a parent

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