只读/禁用输入未在Angular中提交 [英] Readonly/Disabled input not submitting in Angular

问题描述

在Angular 2中创建表单时遇到了问题.我需要提交一些由服务动态生成的值. 使用Angular的http模块，我得到了一个价格，然后用户现在可以准确地知道X智利比索的数量是多少比特币.我正在尝试提交所有数据.我无法执行此操作，因为角度格式未提交禁用/只读输入.这些输入是汇率和目标金额(等于btc).

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

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>

再次感谢！

编辑！！:

数据驱动的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>

推荐答案

您可以使用 getRawValue() ，它为您提供所有表单值，甚至是禁用的值.

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}],
  ....
});

使用

this.myForm2.getRawValue()

在上面的示例中将包含btcmount值.

will include in above example btcmount value.

看到模板...在反应形式中，Angular忽略了value和[value].我们可以克服此问题，并使用单向绑定，我也建议您对字段clpAmount进行设置，并设置[ngModel]="baseAmount".为什么?好吧，首先ngModel指令甚至没有包含在ReactiveFormsModule中，因此，即使在文档中没有明确提及，我们也可以假设它们不能一起使用.我们也可以理解，如果一起使用[(ngModel)]，我们将有两个双向绑定，有时可能会导致问题.

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]更好，因为Angular只是将TS中的值绑定到模板，并且实际上并不关心接下来会发生什么.在某些情况下，[ngModel]可以以反应形式使用，这是其中一种.即使反应形式忽略value，它也不会忽略ngModel，因此我们可以在这里使用它！因此，将[value]与[ngModel]交换:

[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'">

现在使用getRawValue()时，您拥有所有值:)

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

这篇关于只读/禁用输入未在Angular中提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！