CODEWITHSUNDEEP
typescriptionic2
Vanojx1
Vanojx1

Reputation: 5574

Ionic 2 unable to update form value from class

Im stuck while trying to update a form field using ionic 2, this is the spec:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
Node Version: v4.4.7

and this is the code so far:

      <form [formGroup]="blueForm" (ngSubmit)="onSubmit()">
            <ion-item [class.error]="!deviceName.valid && deviceName.touched">
                <ion-label floating>Device Name</ion-label>
                <ion-input type="text" value="" formControlName="deviceName"></ion-input>         
            </ion-item>
            <div *ngIf="deviceName.hasError('required') && deviceName.touched"
                class="error-box">* Device Name is required!</div>               
            <br/><br/> 
            <ion-grid>
                <button type="submit" class="custom-button" [disabled]="!blueForm.valid" block>Change Name</button>
            </ion-grid>
        </form>

im trying to update the value using this function:

(<Control>this.blueForm.controls['deviceName']).updateValue('THE NEW VALUE', { onlySelf: true });

and here the form definition:

    blueForm: FormGroup;

    deviceName = new FormControl("", Validators.required);

    constructor(private platform: Platform, public navCtrl: NavController, private fb: FormBuilder, private ref: ChangeDetectorRef) {
        this.blueForm = fb.group({
            "deviceName": this.deviceName,
        });
    }

and finally the error is:

Error TS2352: Neither type 'AbstractControl' nor type 'Control' is assignable to the other. Property 'updateValue' is missing in type 'AbstractControl'.

Upvotes: 1

Views: 979

Answers (2)

2xSamurai
2xSamurai

Reputation: 1309

You can update individual form field values using the following.

this.blueForm.controls['name'].patchValue('new value'); this.blueForm.controls['name'].setValue('new value');

For a detailed explanation, check this link https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Upvotes: 1

sebaferreras
sebaferreras

Reputation: 44659

I think the issue is because the control is named deviceName but you're trying to set its value by doing (<Control>this.blueForm.controls['name']) (notice that deviceName != name)

Also, try using the updateValueAndValidity(newValue) instead of the updateValue method.

Upvotes: 0

Related Questions