角4の動的フォーム - タッチしていない場合は空の値 - これらの表示されたデフォルト値を取得する方法？

Question

Angular 4.xを使用すると動的なフォームが作成されました。 （状況に応じてフィールドを追加または削除することができます） 最初はすべてうまくいっていました。すべての値（開始、終了、カテゴリ）には、テンプレートに初期値が設定されています。視覚的にすべてが完璧に見えます。ページ上の他のオブジェクトに応じて値が正しく推測されたり、ライブで同期されている場合は、ユーザーは何も変更する必要はありません。

問題：ユーザーが値を変更しない場合は、すべてフォームから返されます。ページに素晴らしいコンテンツを表示しているにもかかわらず。 すでに元気な/汚れていて、触れられた旗でたくさん遊んだ。何も変わっていません。

最後に、開始値と終了値の回避策が見つかりました。あまり美しくない。 typescriptで同じ日付変換を行い、formbuilderの開始値と終了値をまったく同じものに設定するだけです。テンプレートから値=を削除して、重複したコードを減らすことができました。しかし、それを行うと、入力フィールドはページ上に空のままです。

しかし、この回避策はcategory_idのものでは機能しません。これは、ページ上のライブを変更する可能性があります。さらに、categoriesService.selectedCategoryはnoneにすることができます。また、categoriesService.selectedCategory.idフィールドにも興味があります。

ページ上の視覚的なことが行われ、うまく見えます。しかし、提出時にこれらの値をページから入手するにはどうすればよいですか？ （ユーザーが値でプレーしていない場合でも）

これは私のテンプレートがどのように見えるかです：

<form [formGroup]="myNewCustForm" novalidate (ngSubmit)="save(myNewCustForm)"> 
... 
<label>product</label> 
<select class="form-control" formControlName="category_id"> 
    <option 
    *ngFor="let category of categoriesService.categories" 
    [ngValue]="category.id" 
    [selected]="categoriesService.selectedCategory ? category.id === categoriesService.selectedCategory.id : false"> 
     {{category.name}} 
    </option> 
</select> 
... 
<label>start</label> 
<div class="input-group"> 
    <input 
    class="form-control" 
    placeholder="yyyy-mm-dd" 
    name="dprestart" 
    ngbDatepicker 
    #dpstart="ngbDatepicker" 
    value="{{startDate | date: 'yyyy-MM-dd'}}" 
    formControlName="start"/> 
    <button 
    class="input-group-addon" 
    (click)="dpstart.toggle()" 
    type="button"> 
    <i class="fa fa-calendar" aria-hidden="true"></i> 
    </button> 
</div> 

活字体（角の4.x）：

return this.formBuilder.group({ 
    start: this.startDateString, 
    end: this.endDateString, 
    category_id: '' 
}); 

とで保存方法：たstartDateとendDateにおよそ

this.presences.value.forEach(presence => { 
    ... 
    console.log(presence.start); 
    console.log(presence.category_id); 
    ... 
} 

詳細情報：

// presence default values - declarations 
startDate: Date; 
startDateString: string; 
endDate: Date; 
endDateString: string; 

、その後ngInitに呼び出されるメソッドで：

this.endDate = new Date(Date.now()); 
this.endDate.setHours(0, 0, 0); 
if(this.endDate.getDay() > 4) { 
    this.endDate.setDate(this.endDate.getDate()+13-(this.endDate.getDay() || 7)); 
} else { 
    this.endDate.setDate(this.endDate.getDate()+6-(this.endDate.getDay() || 7)); 
} 
this.startDate = new Date(Date.now()); 
this.startDateString = this.datePipe.transform(this.startDate, 'yyyy-MM-dd'); 
this.endDateString = this.datePipe.transform(this.endDate, 'yyyy-MM-dd'); 

Answer 1

反応性のフォームでは、value、disabledとselectedのようなものは動作しません。あなたがしなければならないのは、代わりにフォームコントロールを利用して、あなたが望むことをそれらと共に行うことです。また、ngbDatepickerと、それは望んでいる値は、のように見えるタイプNgbDateStructである必要があります：あなたは日付ピッカーがそれを受け入れるように日付をフォーマットする必要がある日付ピッカーを持つので

{ 
    "year": 2017, 
    "month": 11, 
    "day": 22 
} 

、ここでの方法の簡単なサンプルです

startDateString: NgbDateStruct = {year: new Date().getFullYear(), 
            month: new Date().getMonth() + 1, 
            day: new Date().getDate()}; 

これはあなたのフォームコントロールに割り当てられます。

selectの場合、上記のように、Angularはselectedをまったく気にしません。何をする必要がある、それは変更されるたびに、あなたがサービスから取得された値とpatchValue（またはsetValue）を使用することです：

this.myNewCustForm.controls.category_id.setValue('some value') 

あなたはこの値のサービスを使用しているようです。次に、setterとgetterを使用して、この値をフォームコントロールに設定します。