只讀/禁用輸入角

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

基本上你想要從實際表單中獲取數據，而不是從模型中獲取數據。同樣的問題也發生在模型驅動，維韋克概述（形式爲通而不是使用模型）