角度2 - JQueryコードで設定されたフォーム要素の値が、他の手動入力フォームデータと一緒に送信されていません

Question

私はユーザーがhtml形式で新しいレシピを作成できるようにする角度2アプリを設計しました。ユーザーが手動で値をフォームに入力すると、送信ボタンをクリックするとこれらの値がすべてサービスコードに渡されます。問題は、送信ボタンを押す前にJQueryスクリプトによって更新されるフォーム要素があることですが、送信ボタンをクリックして送信されたフォームデータの内容を表示すると、このフォーム要素に値はありません。なぜ私は実際に私の画面上のフォームの値を見ることができるので、私は本当に理解していない。このフォーム要素に手動で値を入力すると、データはフォームデータに正しく送信されます。以下は

は私のHTML（jQueryので設定された値を持つ要素は、要素のid = "image_idは" "である）である： -

<div class="row"> 
    <div class="col-md-12"> 
    <form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()"> 
     <table class="table table-hover table-responsive table-bordered"> 
     <tr> 
      <td> 
      Name 
      </td> 
      <td> 
      <input name="name" formControlName="name" type="text" class="form-control" required /> 
      <div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')" 
       class="alert alert-danger">Name is required 
      </div> 
      </td> 
     </tr> 

     <tr> 
      <td> 
      Image 
      </td> 
      <td> 
      <input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" /> 
      <button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button> 
      <input name="image_id" formControlName="image_id" type="text" class="form-control" id="image_id" /> 
      </td> 
      <td> 
     </tr> 

     <tr> 
      <td></td> 
      <td> 
      <button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid"> 
       <span class="glyphicon glyphicon-plus"></span> Create 
      </button> 
      </td> 
     </tr> 
     </table> 
    </form> 
    </div> 
</div> 

マイ角度2コンポーネントファイルは、次のようになります -

import { Component, Input, Output, EventEmitter, OnInit, ElementRef } from 

'@angular/core'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 
import { Observable } from 'rxjs/Observable'; 

import { CategoryService } from '../category.service'; 
import { RecipeService } from '../recipe.service'; 
import { DifficultyService } from '../difficulty.service'; 
import { IngredientService } from '../ingredient.service'; 
import { ImageService } from '../image.service'; 

import { Recipe } from '../recipe'; 
import { Category } from '../category'; 
import { Difficulty } from '../difficulty'; 
import { Ingredient } from '../ingredient'; 

import $ from "jquery"; 

@Component({ 
    selector: 'app-create-recipe', 
    templateUrl: './create-recipe.component.html', 
    styleUrls: ['./create-recipe.component.css'], 
    providers: [RecipeService, ImageService] 
}) 

export class CreateRecipeComponent implements OnInit { 

    create_recipe_form: FormGroup; 

    @Output() show_read_recipes_event = new EventEmitter(); 

    imageId: number; 

    constructor(
    private _recipeService: RecipeService, 
    private _imageService: ImageService, 
    formBuilder: FormBuilder, 
    private elem: ElementRef 
) { 
    this.create_recipe_form = formBuilder.group({ 
     name: ["", Validators.required], 
     description: ["", Validators.required], 
     image_id: '' 

    }); 
    } 

    ngOnInit() { 

    } 

    createRecipe(): void { 
    this._recipeService.createRecipe(this.create_recipe_form.value) 
     .subscribe(
     recipe => { 
      console.log(recipe); 
      this.readRecipes(); 
     }, 
     error => console.log(error) 
    ); 
    } 

    readRecipes(): void { 
    this.show_read_recipes_event.emit({ title: "Read Recipes" }); 
    } 

    uploadImage(e) { 
    let files = this.elem.nativeElement.querySelector('#selectFile').files; 
    let formData = new FormData(); 
    let file = files[0]; 

    formData.append('selectFile', file, file.name); 

    this._imageService.uploadImage(formData) 
     .subscribe(
     image => { 
      console.log(image); 
      this.addImageIdToHtml(image) 

      e.preventDefault(); 
      e.stopPropagation(); 
     }, 
     error => console.log(error) 
    ); 
    } 

    addImageIdToHtml(image){ 
    this.imageId = image[0]; 
    $("#image_id").val(this.imageId); 
    $("#image_id").text(this.imageId); 
    } 

} 

Answer 1

jQueryはDOMを直接操作しますが、Angularフォームの場合はフォームインスタンスを作成して破棄し、DOMを変更してもフォームインスタンスの値が変更されるわけではありません。値の変更。addImageIdToHtmlをfolloに変更してみてくださいwing：

addImageIdToHtml(image){ 
    this.imageId = image[0]; 
    this.create_recipe_form.patchValue({ 
     "image_id" : this.imageId 
    }); 
}