Geek Answers Handbook

How to programmatically change an initial property in angular 2 form without an ng model

I am new to Angular 2 framework. I appreciate any help.

I have a regular component in Angular 2:

import {FORM_DIRECTIVES, FormBuilder, Validators} from 'angular2/common';

export class TestComponent {
    public values = ['value1', 'value2', 'value3', 'value4'];
}

Then I insert FormBuilderinto the constructor function:

@Inject(FormBuilder) public fb

HTML contains the following markup:

<input [(ngModel)]="formData.title" type="text" class="form-control" ngControl="title">

The title and description work fine. But I added dropstrap dropdown and it has no form element .

<div *ngFor="#value of values" (click)="onValueChanged(value)" class="dropdown-item">{{value}}</div>

So the problem is that the html markup does not contain any model. The way I tried to solve this problem is to create a functiononValueChanged

 onValueChanged(value){
    this.formData.controls.value.updateValue(value);
    this.formData.value = value;
    console.log(this.formData.pristine) //Still true :(
}

Both of these lines do not work, because they this.formData.pristinedo not change after the drop-down menu.

Now I’m thinking how to update FormBuilder, it would be nice to have some methods likethis.fb.update()

+4
1

pristine,

this.formData.controls.value.markAsDirty();

. . https://github.com/angular/angular/issues/4933

+7

More articles:


All Articles