只读/禁用输入角

Question

未提交我一直在创造角2形式的问题，我需要提交的dinamically由服务产生的一些值。 采用了棱角分明的HTTP模块，我得到一个价格，然后用户可以多比特币现在究竟是怎么智利比索的X量。我想要做的是提交所有的数据。我不能这样做，因为角度表单不提交已禁用/只读输入。这些投入是汇率和目标金额（相当于btc）。

我尝试了模板驱动的方法和驱动方法没有成功的数据。我甚至无法在控制台中记录这些值。如果我从输入中删除禁用或只读属性，则值将记录在控制台中并提交给我的数据库。

感谢您抽出宝贵时间来帮助我。这是我的代码：

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

正如你可以在我的代码中看到，驱动方式的数据被注释掉，除了用于提交表单的功能。

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> 

Answer 1

您可以使用getRawValue()，它给你的所有表单值，甚至禁用的。

所以，当你的形式看起来是这样的：

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

使用

this.myForm2.getRawValue() 

将在上面的例子中包括btcmount值。

编辑：

见此模板...活性形式，角无视value和[value]。我们可以克服这一点，并使用单向绑定，我也建议你在你的领域做clpAmount并设置[ngModel]="baseAmount"。为什么？那么，首先ngModel指令甚至没有包含在ReactiveFormsModule中，因此，即使没有在文档中明确提及，我们也可以假设它们不应该一起使用。我们也可以理解，如果一起使用[(ngModel)]，我们会有两个双向绑定，这有时会导致问题。

[ngModel]更好，因为Angular只是将TS中的值绑定到模板上，并不关心接下来会发生什么。在某些情况下，[ngModel]可用于反应形式，这是其中的一种情况。即使反应形式忽略value，它也不会忽略ngModel，所以我们可以在这里使用它！因此，与[ngModel]交换[value]：

<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() :)

Answer 2

如果你想把所有的表单值，然后

更改此功能

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

随着

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

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

只读/禁用输入未提交角

残疾人绝不会以任何形式提交 但只读，你总是会得到在提交的表单，

问题与你的代码不是角度的

Answer 3

为了扩展维韦克的ansver，具有反应形式，你会做这样的：

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

}); 

和

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

或（上进行更改）：

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

基本上你想要从实际表单中获取数据，而不是从模型中获取数据。同样的问题也发生在模型驱动，维韦克概述（形式为通而不是使用模型）