Angular2:フォームの値をデフォルトフィールドのモデルに変換する際の問題

user2094257

RESTAPIに投稿する必要のある棚卸しフォームで忙しいです。デフォルト値0で初期化される3つのフィールドを持つstockTakeモデルがあります。3つのフィールド「StockTakeID、IDKey、およびPackSize」は、データを入力する必要がある角度形式の一部ではありません。私の問題は、デフォルト値を持つこれら3つのフィールドを持つモデルをRestServiceに送信することです。stockTakeForm.valueを送信すると、これらの3つのフィールドが送信されるデータの一部ではないため、エラーが発生します...これを機能させる方法はありますか?

私のstock-take.model.ts:

export class StockTakeModel {

    constructor(
    StockTakeID: number = 0,
        IDKey: number = 0,
        BarCode: number,
        ProductCode: string,
        SheetNo: string,
        BinNo: string,
        Quantity: number,
        PackSize: number = 0) { }
}

私のstock-take.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { RestService } from '../../services/rest.service';

import { StockTakeModel } from '../../models/stock-take.model';

@Component({
  selector: 'stock-take',
  templateUrl: './stock-take.component.html',
  styleUrls: ['./stock-take.component.css']
})
export class StockTakeComponent implements OnInit {
    stockTakeForm: FormGroup;   

  constructor(private fb: FormBuilder, private restService: RestService) { 
    this.stockTakeForm = fb.group({
        'sheetNo':['', Validators.required],
        'binNo':['', Validators.required],
        'barcode':['', Validators.required],
        'Qty':['', Validators.required]
    }); 
    }

  submitStockTake(stockTakeModel: StockTakeModel) {
      //console.log(stockTakeModel);

    this.restService.postStockTake(stockTakeModel)
    .subscribe(
    (res) => {
        console.log(res);
    },
    (res) => {
        console.log("failure: " + res);
    }
    );
    this.stockTakeForm.reset();
  }

  ngOnInit() {

  }
}

私のstock-take.component.html:

<div class="row">
    <div class="col-md-6 col-md-push-3">
        <h1>Stock Take</h1>
        <br /><br />
        <form [formGroup]="stockTakeForm" role="form" (ngSubmit)="submitStockTake(stockTakeForm.value)">
            <input type="text" placeholder="Enter Sheet Number" class="form-control" id="sheetNo" [formControl]="stockTakeForm.controls['sheetNo']" name="sheetNo">
            <input type="text" placeholder="Enter Bin Number" class="form-control" id="binNo" [formControl]="stockTakeForm.controls['binNo']" name="binNo">
            <input type="number" placeholder="Enter Barcode" class="form-control" id="bCode" [formControl]="stockTakeForm.controls['barcode']" name="barcode">
            <input type="number" placeholder="Enter Quantity" clas="form-control" id="Qty" [formControl]="stockTakeForm.controls['Qty']" name="quantity">
            <button class="btn btn-block" [disabled]="!stockTakeForm.valid">Submit</button>
        </form>
    </div>
</div>

更新されたstock-take.component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { RestService } from '../../services/rest.service';

import { StockTakeModel } from '../../models/stock-take.model';

@Component({
  selector: 'stock-take',
  templateUrl: './stock-take.component.html',
  styleUrls: ['./stock-take.component.css']
})
export class StockTakeComponent implements OnInit {
    stockTakeForm: FormGroup;
    stockTakeModel: StockTakeModel;

  constructor(private fb: FormBuilder, private restService: RestService) { 
    this.stockTakeForm = fb.group({
        'sheetNo':['', Validators.required],
        'binNo':['', Validators.required],
        'barcode':['', Validators.required],
        'Qty':['', Validators.required]
    });
    }

    doStockTake(val: any) {
        //console.log("val:" + JSON.stringify(val));
        this.stockTakeModel = new StockTakeModel(0, 0, val[Object.keys(val)[2]], '', val[Object.keys(val)[0]], val[Object.keys(val)[1]], val[Object.keys(val)[3]], 0);

//  console.log(this.stockTakeModel);
    console.log(JSON.stringify(this.stockTakeModel));
    }

  submitStockTake(stockTakeModel: StockTakeModel) {
      //console.log(stockTakeModel);

    this.restService.postStockTake(stockTakeModel)
    .subscribe(
    (res) => {
        console.log(res);
    },
    (res) => {
        console.log("failure: " + res);
    }
    );
    this.stockTakeForm.reset();
  }

  ngOnInit() {

  }
}
AJT82

1つの回避策は、新しい変数を作成することです。例: stockTakeModel: StockTakeModel;

それが機能しない場合(未定義について不平を言ったように)、次のように空のオブジェクトとしてインスタンス化することもできます。

stockTakeModel = {};

編集して、コードを次のように変更しました。それについて少し質問があったので、未定義の場所を示すためにいくつかのconsole.logsも追加しました。

stockTakeModel: StockTakeModel; // undefined at this point (or empty if you have defined it as empty above)!

// use Object keys to access the keys in the val object, a bit messy, but will work!
submitStockTake(val: any) {
  this.stockTakeModel = 
    new StockTakeModel(0, 0, val[Object.keys(val)[2]], '', val[Object.keys(val)[0]], 
       val[Object.keys(val)[1]], val[Object.keys(val)[3]]);  

  // console.log(this.StockTakeModel); // now it should have all values!

  this.restService.postStockTake(this.stockTakeModel)
     .subscribe(d => { console.log(d)} ) // just shortened your code a bit 
  this.stockTakeForm.reset();
  }

編集:上記の解決策に加えて、最終的に最後の問題が解決されました。これStockTakeModel-classが適切に宣言されていないため、値が未定義であるか、実際には空であるためです。したがって、クラスを次のように修正します。

export class StockTakeModel {

    constructor(
    public StockTakeID: number = 0, // you were missin 'public' on everyone
        public IDKey: number = 0,
        public BarCode: number,
        public ProductCode: string,
        public SheetNo: string,
        public BinNo: string,
        public Quantity: number,
        public PackSize: number = 0) { }
}

また、「更新された」コードではまだ(ngSubmit)="submitStockTake(stockTakeForm.value)フォームにあるため、作成したdoStockTake-methodは呼び出されないことにも注意してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

コアデータのフォトアルバムに画像をロードする際の問題

分類Dev

リアクティブフォームの値をモデルオブジェクトに変換する

分類Dev

Angular4のフォームフィールドのデフォルト値

分類Dev

djangoモデルフォームのフォームフィールド値を記憶する

分類Dev

フォームフィールドをRubyonRailsでデータベース化するのに問題がある

分類Dev

resパートナーモデルに新しいフィールドを追加する際の問題

分類Dev

複数の* ngForを含むフォームのモデルバインディングに関する問題

分類Dev

Codeigniter 3、デフォルト言語を動的に変更する際の問題

分類Dev

Railsフォーム入力フィールドの移行のデフォルト値を上書きする

分類Dev

フォーム内の選択フィールドのデフォルト値を設定する方法

分類Dev

フォームフィールドのデフォルトの背景色を変更する方法

分類Dev

djangoのフィールドのデフォルトフォームを変更する

分類Dev

javascriptで入力フィールドのデフォルトを防ぐために偶数リスナーを設定する際に問題がある

分類Dev

AndroidアプリのデフォルトのデバイスブラウザにローカルHTMLファイルをロードする際の問題

分類Dev

フォーム値をAngularに保存する際の問題

分類Dev

Djangoモデルフィールドが空の場合、値をデフォルト値に設定します

分類Dev

動的HTMLフォームに条件付きでフィールドを表示する際の問題

分類Dev

デフォルトのテーブルモデルの問題

分類Dev

別のモデル(外部キー)の初期値をフォームフィールドに入力します

分類Dev

デフォルトフィールドでのDjangoモデルのシリアル化の問題

分類Dev

フォームを編集する際の一意のフィールドのCodeigniter検証の問題

分類Dev

Ruby onRails-モデルのフィールドを別のモデルのフォームに追加します

分類Dev

djangoでの移行後にフィールドのデフォルト値を変更する

分類Dev

条件付きルーティングはAngular2のデフォルトルートを変更します

分類Dev

モデルのフィールドのデフォルト値を別のモデルインスタンスに設定する

分類Dev

デフォルトのDjangoモデルからモデルフィールドの名前を変更するにはどうすればよいですか?

分類Dev

デフォルトポートの変更に関するApacheZookeeperの問題

分類Dev

デフォルトフィールドのラベル名を変更する

分類Dev

Django 1.7には、日時フィールドを手動のHTMLフォームからモデルに自動的に変換する方法がありますか?

Related 関連記事

  1. 1

    コアデータのフォトアルバムに画像をロードする際の問題

  2. 2

    リアクティブフォームの値をモデルオブジェクトに変換する

  3. 3

    Angular4のフォームフィールドのデフォルト値

  4. 4

    djangoモデルフォームのフォームフィールド値を記憶する

  5. 5

    フォームフィールドをRubyonRailsでデータベース化するのに問題がある

  6. 6

    resパートナーモデルに新しいフィールドを追加する際の問題

  7. 7

    複数の* ngForを含むフォームのモデルバインディングに関する問題

  8. 8

    Codeigniter 3、デフォルト言語を動的に変更する際の問題

  9. 9

    Railsフォーム入力フィールドの移行のデフォルト値を上書きする

  10. 10

    フォーム内の選択フィールドのデフォルト値を設定する方法

  11. 11

    フォームフィールドのデフォルトの背景色を変更する方法

  12. 12

    djangoのフィールドのデフォルトフォームを変更する

  13. 13

    javascriptで入力フィールドのデフォルトを防ぐために偶数リスナーを設定する際に問題がある

  14. 14

    AndroidアプリのデフォルトのデバイスブラウザにローカルHTMLファイルをロードする際の問題

  15. 15

    フォーム値をAngularに保存する際の問題

  16. 16

    Djangoモデルフィールドが空の場合、値をデフォルト値に設定します

  17. 17

    動的HTMLフォームに条件付きでフィールドを表示する際の問題

  18. 18

    デフォルトのテーブルモデルの問題

  19. 19

    別のモデル(外部キー)の初期値をフォームフィールドに入力します

  20. 20

    デフォルトフィールドでのDjangoモデルのシリアル化の問題

  21. 21

    フォームを編集する際の一意のフィールドのCodeigniter検証の問題

  22. 22

    Ruby onRails-モデルのフィールドを別のモデルのフォームに追加します

  23. 23

    djangoでの移行後にフィールドのデフォルト値を変更する

  24. 24

    条件付きルーティングはAngular2のデフォルトルートを変更します

  25. 25

    モデルのフィールドのデフォルト値を別のモデルインスタンスに設定する

  26. 26

    デフォルトのDjangoモデルからモデルフィールドの名前を変更するにはどうすればよいですか?

  27. 27

    デフォルトポートの変更に関するApacheZookeeperの問題

  28. 28

    デフォルトフィールドのラベル名を変更する

  29. 29

    Django 1.7には、日時フィールドを手動のHTMLフォームからモデルに自動的に変換する方法がありますか?

ホットタグ

アーカイブ