[英]Angular 2+ (4.3.5) ngForm reset (template-driven) does't include html-form reset - Bug or Feature?
[英]Range Input won't reflect default value in Template Driven Form (Angular 2)
我希望我的范圍輸入加載時的默認值為0。默認情況下,在頁面加載時,每個輸入都設置為中間。 當我檢查元素時,我看到了
<input
class="form-control ng-untouched ng-pristine ng-valid"
step="1"
type="range"
ng-reflect-model=""
name="my_own_job"
id="bus_info_04_a_01_01"
min="0"
max="10"
value="0"
>
一直到最后,您確實看到了值的傳遞。這就是*ngFor
內的輸入外觀。
<input class="form-control" type="range" step="1"
[attr.name]="ans.ctrlName"
[attr.id]="ans.id"
[attr.min]="Data.loExtreme"
[attr.max]="Data.hiExtreme"
[attr.value]="ans.value"
[(ngModel)]="UserResponse[ans.respName]"
#{{ans.respName}}="ngModel"
>
我也像這樣動態創建變量
//From parent component
@Input() Data : Question;
//For dynamic variables for ngModel
UserResponse : { [ propName : string ] : string } = {};
//Function called in OnInit
loadResponses(){
let data : any = this.Data;
let control : string = data.ctrlName;
let response : string = data.respName;
let multiResp : Array<any> = data.answers;
let defVal : string = '';
let load : Array<string> = [];
load.push( control );
if( response == '' || response == undefined ){
if( this.Template == 'multi_fader' ){
multiResp.forEach( resp => {
this.UserResponse[ resp.ctrlName ] = resp.answer;
this.UserResponse[ resp.respName ] = 0;
});
}
else {
multiResp.forEach( resp => {
this.UserResponse[ resp.ctrlName ] = resp.answer;
this.UserResponse[ resp.respName ] = defVal;
});
}
}
else {
load.push(response);
load.forEach( ctrl => { this.UserResponse[ ctrl ] = defVal; });
this.UserResponse[ this.Data.ctrlName ] = this.Data.question;
}
}
我嘗試將值設置為UserResponse[respName]
但輸入的value
屬性只是顯示為單詞value
,其旁邊沒有相等。 我來回取出所有value
屬性,只留下ngModel
內容,並注釋了設置默認值的函數部分,以查看僅value
屬性是否可以正常工作而不會受到函數的任何其他干擾,傳遞值的結果相同,但輸入設置在中間。 我嘗試將其設置為1
只是為了看看是否0
使它為null
但這沒什么區別。
我什至將json
文件中該輸入的每個問題的value
屬性更改為1
,它在檢查中顯示,但沒有更改輸入的默認位置。 有人可以說明為什么會發生這種情況以及如何解決嗎? 這里有一個Plunkr整個機制的,如果你需要看看還有什么是怎么回事。
如果您更改模板,
[attr.value]="ans.value"
至,
[(ngModel)]="ans.value"
它應該在范圍輸入視圖中將其值初始化為零(已在plunker中確認)。 雖然ngModel
模板中的另一個ngModel
在做什么。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.