角4動態表單 - 如果未觸及空值 - 如何獲得這些顯示的默認值？

使用Angular 4.x我創建了動態表單。（它允許根據情況添加或刪除字段。）一開始就一切都很好。所有值（開始，結束，類別）都有一個在模板中設置的初始值。在視覺上，一切看起來都很完美如果根據頁面上的其他對象或與頁面上的其他對象同步正確猜測值，則用戶無需更改任何內容。角4動態表單 - 如果未觸及空值 - 如何獲得這些顯示的默認值？

問題：如果用戶沒有更改這些值，它們將從窗體返回爲「」。儘管在頁面上展示了不錯的內容。已經玩過很多原始/骯髒和感動的旗幟。沒有改變。

最後，我找到了開始和結束值的解決方法。不是很漂亮。只需在typescript中進行相同的日期轉換，並將formbuilder中的開始和結束值設置爲完全相同的東西。以爲我可以從模板中刪除value =來減少重複的代碼。但是，如果我這樣做，輸入字段在頁面上保持空白。

但是，此解決方法無法用於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和結束日期

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

來源

2017-11-25 user3387542

剛剛發現了另一個解決方法。現在只要檢查結果是否返回「」。如果是這樣，我會嘗試重新計算默認值可能是什麼。有沒有乾淨的方式？ – user3387542

此替代方法也不起作用。 – user3387542

這是否有一個笨蛋？ –

與活性形式，像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來達到此目的將值設置爲表單控件。

來源

2017-11-26 19:00:34 Alex

角4動態表單 - 如果未觸及空值 - 如何獲得這些顯示的默認值？

回答

相關問題