angular2-formbuilder | 易学教程

Angular - Reactive Forms - How to pass an object to a FormGroup with a class and validators

阅读更多关于 Angular - Reactive Forms - How to pass an object to a FormGroup with a class and validators

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 pass an object to this.fb.group() that will have the controls that are part of the class and be able to

Form control valueChanges gives the previous value

阅读更多关于 Form control valueChanges gives the previous value

问题 I have a form control with name 'question1' within the form object parentForm and I have subscribed to it in the following way. Its a radio button with two options Yes and No , when I select No I get Yes and when I select Yes its a No . this.parentForm.controls['question1'].valueChanges.subscribe( (selectedValue) => { // If option `No is selected` console.log(selectedValue); // displays No. OK console.log(this.parentForm.value['question1']); // displays Yes. Problem is here } ); selectedValue

Angular 2 - Can't set form array value

阅读更多关于 Angular 2 - Can't set form array value

I get this error: There are no form controls registered with this array yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout). When using this code: public settingsForm: FormGroup = this.fb.group({ collaborators: this.fb.array([]), rsvp: this.fb.group({ latestDate: ['', [Validators.required]], latestTime: ['', [Validators.required]], guestLimit: ['', [Validators.required]], isRSVPOpen: false, isGuestPlusOne: false, isAutoApproveToGuestlist: false, isOnlyFacebookRSVP: false, isBirthdayAndPhoneRequired: false }), tickets: this.fb.group({ info: this.fb.group({

How to add more input fields using a button - Angular 2 dynamic forms

阅读更多关于 How to add more input fields using a button - Angular 2 dynamic forms

So I used the guide here: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html I need to add more fields to an existing field. I've made something that works, but it's clunky and it resets the form when I hit it. Code below: In dynamic-form.component.ts: add_textbox() { this.questions.push(this.questionService.create_textbox({key: "test", label: "Test"})); console.log(this.questions); this.form = this.qcs.toFormGroup(this.questions); } In question.service.ts create_textbox({key, value, label = '', order = 1, type = "text", description = "", help = ""}: {key?: any, value?: any, label?:

Angular 2/4 Edit Form Populate FormArray Controls

阅读更多关于 Angular 2/4 Edit Form Populate FormArray Controls

I'm trying to implement an edit form for a model with nested attributes (FormArray). I'm having trouble with the syntax and I'm uncertain whether I'm on the right track. The attributes for the main form work, it's the nested form I'm having problems with. Here's what I have so far. Here I initiate the form group: private initForm() { this.subscription = this.expenseService.getExpense(this.id) .subscribe( expense => { this.expense = expense; this.patchForm(); } ); this.expenseEditForm = this.fb.group({ date: '', amount: '', check_number: '', debit: '', payee_id: '', notes: '', expense_expense

Analogue of Angular 2 Provider

阅读更多关于 Analogue of Angular 2 Provider

问题 I have a custom component for checkbox. const CheckboxValue = new Provider( NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => CheckboxComponent), multi: true }); @Component({ ... providers: [CheckboxValue] }) export class CheckboxComponent implements ControlValueAccessor { ... } As I understood in RC3 Provider was marked as deprecated. How I must rewrite my Component so that he working after next update? 回答1: It now takes an object like: const CheckboxValue = { provide: NG_VALUE_ACCESSOR,

How to iterate form array(array in array in array) in angular2 reactive forms?

阅读更多关于 How to iterate form array(array in array in array) in angular2 reactive forms?

I tried to Iterate formArray several times, This is plunker link for this case https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview i want out put like this plunk https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview This is my scenario [ { "id": 1, "legend": "businessModule", "group": [ { "id": 1, "permission": { "controleType": "ff", "id": 2, "key": "create Business" }, "roles": [ { "id": 1, "name": "self" }, { "id": 2, "name": "other" } ] }, { "id": 1, "permission": { "controleType": "ff", "id": 2, "key": "edit business" }, "roles": [ { "id": 1, "name": "self" }, { "id": 2, "name": "other" }

Two way binding in reactive forms

阅读更多关于 Two way binding in reactive forms

Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form? For example, here is a standard reactive form. Let's pretend it's much more complicated than it looks, with lots and lots of various inputs and business logic, and therefore more appropriate for a model-driven approach than a template-driven approach. export class ExampleModel { public name: string; // ... lots of other inputs } @Component({ template: ` <form [formGroup]="form"> <input type="text" formControlName="name"> ... lots

Why should I use Validators.compose()?

阅读更多关于 Why should I use Validators.compose()?

问题 I have a field I want to validate with multiple validators. Using the Module Driven approach the code looks likes this: this.exampleForm = this.fb.group({ date_start : ['', Validators.compose([ Validators.required, Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}") ]) ] }) But I can also write this withouth Validators.compose() like: this.exampleForm = this.fb.group({ date_start : ['', [ Validators.required, Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}") ] ] }) And it works just fine.

ngModel cannot be used to register form controls with a parent formGroup directive

阅读更多关于 ngModel cannot be used to register form controls with a parent formGroup directive

After upgrading to RC5 we began getting this error: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: <div [formGroup]="myGroup"> <input formControlName="firstName"> </div> In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: Example: <div [formGroup]="myGroup"> <input formControlName="firstName"> <input [(ngModel)]="showMoreControls" [ngModelOptions]="