Readonly/Disabled input not submitting in Angular

Question

I've been having problems creating a form in Angular 2. I need to submit some values that are dinamically generated by a service. Using the http module of Angular I get a price and then the user can now exactly how much bitcoin is an X amount of chilean pesos. What I'm trying to do is submit all that data. I can't do it because angular forms are not submitting the disabled/readonly inputs. These inputs are the exchange rate and the target amount (equivalent in btc).

I tried the template driven approach and the data driven approach with no success. I can't even log the values in the console. If I remove disabled or readonly property from the inputs the values are logged in the console and submitted to my database.

Thanks for taking the time to help me. This is my code:

component.ts

import { Component, OnInit } from '@angular/core';
import { SurbtcService } from '../services/exchange/surbtc.service';
import { FormBuilder, FormGroup, Validators, FormControl, NgForm } from "@angular/forms";
import { FiredbService } from '../services/firedb.service';
import * as firebase from 'firebase/app';

@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {

  //myForm2: FormGroup;
  //error = false;
  //errorMessage = '';

  constructor(private surbtcService: SurbtcService, private fb: FormBuilder, private dbfr: FiredbService) {
/*
          this.myForm2 = this.fb.group({
            email: ['', Validators.email],
      clpmount: ['', Validators.required],
      btcmount: [''],
      rate: [''],
      descripcion: ['']

        });
 */  }
//Form

info = {
  rate: '',
  btcmount: ''
};


onSub() {
 console.log(this.info);
  }



  //surbtcservice

  prices: any;
  baseAmount: 1;

  get exchangeRate() {
   return this.prices * 0.989
    }

  get targetAmount() {
   return this.baseAmount / this.exchangeRate;
    }

  ngOnInit() {
     this.surbtcService.getPrices()
      .subscribe(prices => {
       this.prices = prices.ticker.min_ask[0];
       console.log(prices.ticker.min_ask[0]);
        });
    } }

As you can see in my code, the data driven approach is commented except for the function used to submit the form.

html:

<form (ngSubmit)="onSub(f)" #f="ngForm">
          <div class="form-group">
            <md-input-container class="full-width">
              <input mdInput type="number" id="montoclp" name="clpmount" placeholder="Ingrese el monto en CLP" [(ngModel)]="baseAmount" name="clp">
            </md-input-container>
            <md-input-container class="full-width">
              <input mdInput class="form-control" name="btcmount" [ngModel]="info.btcmount" placeholder="Monto en BTC" id="vat" [value]="targetAmount | number:'1.8-8'" readonly>
            </md-input-container>
            <md-input-container class="full-width">
              <input mdInput class="form-control" name="rate" [ngModel]="info.rate" placeholder="Tasa de cambio" id="street" [value]="exchangeRate | number:'1.0-0'" readonly>
            </md-input-container>
            <md-input-container class="full-width">
              <input mdInput type="mail" class="form-control" ngModel name="email" placeholder="E-mail cliente (Opcional)">
            </md-input-container>
            <md-input-container class="full-width">
              <input mdInput type="text" class="form-control" ngModel name="descripcion" placeholder="Descripción pago (Opciona)">
            </md-input-container>
          </div>
          <button md-raised-button type="submit" color="primary" class="btn-w-md">Confirmar</button><div class="divider divider-sm"></div>
        </form>

Thanks again!

EDIT!!!:

data driven html:

            <form [formGroup]="myForm2" (ngSubmit)="onSub()">
              <div class="form-group">
                <md-input-container class="full-width">
                  <input mdInput type="number" id="montoclp" name="clpmount" placeholder="Ingrese el monto en CLP" formControlName="clpmount" [(ngModel)]="baseAmount">
                </md-input-container>
                <md-input-container class="full-width">
                  <input mdInput class="form-control" name="btcmount" placeholder="Monto en BTC" formControlName="btcmount" [value]="targetAmount | number:'1.8-8'">
                </md-input-container>
                <md-input-container class="full-width">
                  <input mdInput class="form-control" name="rate" formControlName="rate" placeholder="Tasa de cambio" [value]="exchangeRate | number:'1.0-0'">
                </md-input-container>
                <md-input-container class="full-width">
                  <input mdInput type="mail" class="form-control" formControlName="email" name="email" placeholder="E-mail cliente (Opcional)">
                </md-input-container>
                <md-input-container class="full-width">
                  <input mdInput type="text" class="form-control" formControlName="descripcion" name="descripcion" placeholder="Descripción pago (Opciona)">
                </md-input-container>
              </div>
              <button md-raised-button type="submit" color="primary" class="btn-w-md">Confirmar</button><div class="divider divider-sm"></div>
            </form>

Will you please post proper code ? it not looks good or updated . because onSub() you are passing form but there is no parameter for this in that function — Vivek Doshi
– Vivek Doshi, Commented Aug 1, 2017 at 4:57

AVJT82 · Accepted Answer · 2017-08-01 16:55:19Z

25

You can use getRawValue(), which gives you all form values, even the disabled ones.

So when your form looks something like this:

this.myForm2 = this.fb.group({
  email: ['', Validators.email],
  clpmount: ['', Validators.required],
  btcmount: [{value: '', disabled: true}],
  ....
});

using

this.myForm2.getRawValue()

will include in above example btcmount value.

EDIT:

Seeing the template... In reactive forms, Angular disregards value and [value]. We can overcome this and use one-way binding, which I also suggest you do with your field clpAmount and set [ngModel]="baseAmount". Why? Well, first of all the ngModel directive isn't even included in ReactiveFormsModule, so from that, even not clearly mentioned in docs, we can all but assume they should not be used together. We can also understand it, if using [(ngModel)] together, we would have two bidirectional bindings, which can sometimes cause issues.

[ngModel] is better, since Angular just binds the value from TS to template, and doesn't really care what happens next. In some cases, [ngModel] can be useful in reactive forms, this is one of those cases. Even though reactive forms ignore value, it does not ignore ngModel, so we can use that just fine here! So exchange [value] with [ngModel]:

<input mdInput  formControlName="btcmount" [ngModel]="targetAmount | number:'1.8-8'">

<input mdInput formControlName="rate" placeholder="Tasa de cambio" [ngModel]="exchangeRate | number:'1.0-0'">

Now you have all values when you use getRawValue() :)

edited Aug 1, 2017 at 16:55

answered Aug 1, 2017 at 11:19

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

claudiomatiasrg Over a year ago

Thanks for your answer AJT_82, but its not working. Still the same thing. When I submit the conform I'm console logging this.myForm2.getRawValue() but I only get the inputs that are not disabled: Object {email: "[email protected]", clpmount: 2000, btcmount: "", rate: "", descripcion: "dsadadas"}

AVJT82 Over a year ago

That look like all values to me... according to your code you have 5 fields?

claudiomatiasrg Over a year ago

Yes, but nor btcmount nor rate are empty. Here, look at this screenshot: ibb.co/fFwtc5

AVJT82 Over a year ago

image does not show. Well, when you used reactive form, did you set the values to form controls?

AVJT82 Over a year ago

You are only showing the template driven form in your question, could you show us the attempt of reactive form please?

|

Vivek Doshi · Accepted Answer · 2017-08-01 04:59:38Z

1

If you want all the form values then

Change this function

onSub() {
 console.log(this.info);
}

With

import { NgForm } from '@angular/forms';

onSub(formData : NgForm) {
 console.log(formData.value);
}

Readonly/Disabled input not submitting in Angular

Disabled will never be submitted in any form But Readonly , you will always get that in submitted form ,

Issue is with your code not with the angular

answered Aug 1, 2017 at 4:59

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

1 Comment

claudiomatiasrg Over a year ago

Sorry for not posting that, you were right, I missed to post the parameter because I did a lot of refactoring and got kind of confused, but I already done what you said and I did again in case I made an error, but its definitly not submitting the disabled/readonly values. Here is a screenshot of my html and console ibb.co/fFwtc5. Its almost the same with data driven approach

yusijs · Accepted Answer · 2017-08-01 05:04:18Z

1

To expand on Vivek's ansver, with a reactive form, you would do it like this:

this.myForm2 = this.fb.group({
      email: ['', Validators.email],
      clpmount: ['', Validators.required],
      btcmount: [''],
      rate: [''],
      descripcion: ['']

});

and

public onSub() {
  console.log(this.myForm2.value);
}

or (on changes):

ngOnInit() {
  ...
  this.form.valueChanges.subscribe(value => console.log(value));
}

basically you want to grab the data from the actual form, and not from your model. Same thing goes for model driven, as Vivek outlined (pass in the form instead of using the model)

answered Aug 1, 2017 at 5:04

yusijs

8679 silver badges20 bronze badges

Collectives™ on Stack Overflow

Readonly/Disabled input not submitting in Angular

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related