angular-reactive-forms

问题 I have the following formControl as part of my Reactive Form: <input class="input" formControlName="email" [placeholder]=""> I was wondering if there were a way to set the placeholder programmatically? Something like: this.formGroup.get('email').placeholder = 'Some value'; 回答1: The placeholder is a property of the HTML element itself, not the formGroup . You can directly bind it like you're doing with a component property ( [placeholder]="someValue" ) and Angular's change detection will

问题 I am trying to set the initial value for an angular 2 reactive form formArray object. Even though the json object used to set the form value contains an array value with multiple entries, only the first entry is shown and the "form.value" also only shows the first entry. I am using the syntax (<FormGroup>this.myForm).patchValue(value, { onlySelf: true }); to set the initial value on the form. Here is a plunker demonstrating the issue: https://plnkr.co/edit/j1S80CmPBF1iHI5ViEia?p=preview I

问题 I'm attempting to calculate a total or other value based on a particular value in a FormArray. I'm finding that when subscribing to valueChanges and attempting to pass the whole array to something like reduce , the "new value" isn't present on the parent FormGroup. Original Example on StackBlitz Sample: this.frm.get('arr')['controls'][i].valueChanges .subscribe((newVal) => { this.frm.get('total').patchValue( this.frm.get('arr').value.reduce((acc, curr) => { return acc + curr.v; }, 0) ) }); If

问题 I am new in angular. I have one scenario where I need only one field required from 5 fields in the form, means if the user fills at least one field then form makes valid. Thanks in advance. 回答1: Since you need to check for the validity of whole form only if one of the fields is non empty , You can manually set the validity like below : if(!this.valid){ this.form.setErrors({ 'invalid': true}); }else{ this.form.setErrors(null); } Where this.valid is your condition based on which you can set the

问题 Please assist, i want to remove all validators in form, Please advise if its possible or not and if not whats the better way to remove validators if you have a form Group of 20 or more form controls, see example below. ngOnInit() { this.exampleFormGroup = this.formBuilder.group({ surname: ['', [Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')]], initials: ['', [Validators.required, Validators.maxLength(4)]] }); } public removeValidators() { this.exampleFormGroup.get('surname'

问题 This question already has answers here : Angular2: How do you mark FormGroup control dirty via `patchValue()` (2 answers) Closed 2 years ago . There is a reactive form in Angular 4, and some control is supposed to be set programmatically at some point. this.form = formBuilder.group({ foo: '' }); ... this.form.controls.foo.setValue('foo'); How can control pristine/dirty state be affected? Currently I'm using both form and foo pristine states, something like: <form [formGroup]="form"> <input

问题 I have a JSON response coming back from the server that is an assessment object with an array of questions. I need to path the values to my reactive form. This patch value function is working when there is only 1 question: this.caseAssessmentForm.patchValue({ ID: assessment.templateID, name: assessment.name, type: assessment.typeName, status: "Not Started", description: assessment.description, questions: { questionScore: '', questionAnswer: '', questionGoal: assessment.templateQuestions[0]

问题 I am new to Angular 2 and unable to resolve this issue even after going through other stack overflow answers. I have just now started learning angular reactive forms and want to try the first example but am stuck. Please help. Here is the HTML form. <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> <div id="user-data"> <div class="form-group"> <label for="username"

问题 addStop() { const control = <FormArray>this.editForm.controls['stops']; control.push(this.initStop()); } I have this code to add a "stop" at the bottom of the form array. But I want to add the new "stop" not to the last position, but one position before the last stop. This doesn't work for example (not at all, I know that the numbers are wrong. Splice function doesn't exist at ) control.splice(2, 0, this.initStop()); 回答1: Use FormArray#insert: control.insert(<position>, this.initStop()); 来源：

问题 I'm trying to create nested reactive forms here : https://stackblitz.com/edit/angular-mgrfbj This is the project heirarchy: ---create company form (hello.component.ts) --- company details form (company-details.component.ts) --- [ employee details form (employee-details.component.ts) employee details form employee details form ... ] For such nested forms, I have to use ViewProviders and FormGroupDirective as given in this video: The first nested form ( company-details.component.ts ) is working