angular-reactive-forms | 易学教程

Angular 4 - find selected value in dropdown

阅读更多关于 Angular 4 - find selected value in dropdown

问题 I am using Angular 4 Reactive Forms to create a dropdown <select id="city" formControlName="city" (change)="onCitySelect($event)" > <option *ngFor="let city of cities" [ngValue]="city" > {{ city }} </option> </select> When a value is selected in the dropdown, I want to call a method and display the selected value. Here is my code to do this onCitySelect(event) { console.log(event.target.value); } I was expecting it to print the City name as shown in the dropdown. However, it seems it displays

Angular Reactive Forms: Dynamic Select dropdown value not binding

阅读更多关于 Angular Reactive Forms: Dynamic Select dropdown value not binding

I have two arrays of data: AssociatedPrincipals (previously saved data) and ReferencePrincipals (static data to populate in dropdown controls). I'm struggling to get the previous value from AssociatedPrincipals to be displayed/selected in a dynamic amount (most examples use a single dropdown) of dropdowns on page load. I'm not certain how to set up the form (code behind and HTML), especially setting the Select's formControlName. Currently, the static values in each dropdown populate, but I cannot get the selected value to bind properly. public ngOnInit() { this.factsForm = this.formbuilder

Set value of <mat-select> programatically

阅读更多关于 Set value of programatically

I'm trying to set value of 2 fields <input matInput> abnd <mat-select> programatically. For text input everything works as expected however for the <mat-select> on the view this field is just like it would have value off null . But if I would call console.log(productForm.controls['category'].value it prints correct value that I set programmatically. Am I missing something? Here is the code: form config: productForm = new FormGroup({ name: new FormControl('', [ Validators.required ]), category: new FormControl('', [ Validators.required ]), }); setting value: ngOnInit() { this.productForm

Pass Angular Reactive FormControls to Children Components

阅读更多关于 Pass Angular Reactive FormControls to Children Components

问题 I have a parent component where I want to create and store my Reactive Form. There will be multiple Form Group instances in a Form Array. I want to pass the Form Controls from each Form Group to a Child Component but am having trouble figuring out how to do this. Here's a Stackblitz demonstrating what I would like to do. Also, some fields will only apply to certain 'makes' of cars which is why i have the following line in my html: <input type="text" *ngIf="car.make != 'ford'" formControlName=

How to get values from disabled form controls in a form group?

阅读更多关于 How to get values from disabled form controls in a form group?

问题 I tried to initialize my new FormControl using form state object and I noticed then this control doesn't influence my form validation and it also disappear from FormGroup values. this.userForm = new FormGroup({ email: new FormControl('', Validators.required), firstName: new FormControl('',Validators.required), lastName: new FormControl('',Validators.required), role: new FormControl({value: 'MyValues', disabled: true},Validators.required), }) Now if I try to do: this.userForm.value //email,

Pass image from FileReader to form input in Angular 6

阅读更多关于 Pass image from FileReader to form input in Angular 6

I try to create an UI where there is a form with a couple of text fields, a input type="file" and a div that you can drop images to upload with the rest of the form. My goal / logic use the same div to either drop an image or click on it and open the folder explorer like the input type="file" behaves. Enabling clicking makes sense in small screens where it is practically impossible to "drag and drop". And since there is already a input type="file" in the form there is no reason to take the image from the div and append it to the form etc etc. I try to take the image that is dropped in the div

nested custom FormArray component doesn't bind with child form with FormArrayName

阅读更多关于 nested custom FormArray component doesn't bind with child form with FormArrayName

问题 I tried to have 2 nested forms using CVA. the problem is the second from isn't initialized with data when I bind it to a formControl. Stackblitz I have MAIN-FORM : this.requestForm = this.fb.group({ garageId: 0, routes: new FormArray([ new FormGroup({ addressPointId: new FormControl, municipalityId: new FormControl, regionId: new FormControl, rvId: new FormControl, sequenceNumber: new FormControl, settlementId: new FormControl, regionName: new FormControl, municipalityName: new FormControl,

touched and valid using reactive forms in Angular

阅读更多关于 touched and valid using reactive forms in Angular

How can i use the touched and valid properties using reactive forms in angular 4. I've used in template driven forms and you can just put this <span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span> below the input field. I've also learned that reactive forms would be better since you have to write the logic in the component.ts. So i want it to implement in the reactive form and i'm stuck on how to use the touched and valid properties. html <form [formGroup]="form" (ngSubmit)="onSignIn(form)"> <div class="form-group"> <input type="text" class=

how to set value in array form with angular

阅读更多关于 how to set value in array form with angular

问题 I want to set value in array like this: this.form.controls[name].setValue('name') but I am working with array forms, and this is not working, even if I pass index of the especific array form for example this is my form array and I want to do is to set value in a function user: FormGroup; users: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.user = this.buildGroup(); this.users = this.fb.group({ data: this.fb.array([this.user]) }); } get fData() { return this.users.get(

Angular - formGroupName value change does not update the form

阅读更多关于 Angular - formGroupName value change does not update the form

问题 As described in the title, formGroupName value change does not update the form. (after hitting the button the value displayed in the input remains the same) Here is a plunker. @Component({ selector: 'my-app', template: ` <form [formGroup]="myForm"> <div [formGroupName]="fgn"> <input [formControlName]="'name'"> </div> </form> <button (click)="formChange()" >Change</button> {{fgn}} <br> {{myForm.value | json}} `, }) export class App { private myForm: FormGroup; private fgn: String; ngOnInit() {