力的輸入控制始終顯示勢必

我的組件值如下：力的輸入控制始終顯示勢必

@Component({ 
    template: ` 
    <form> 
    <label>Enter your name:</label> 
    <input #name name="name" [ngModel]="firstName" (change)="onNameChange(name.value)"> 
    </form> 
    <p>Your name: {{firstName}}</p>` 
}) 
export class AppComponent { 
    firstName = 'John'; 

    onNameChange(value: string): void { 
    if (value == "") { 
     this.firstName = "John"; 
    } 
    else { 
     this.firstName = value; 
    } 
    } 
}

如果用戶刪除所有文字，然後離開輸入控制，輸入控制不回去如我所料，預設文字約翰。我明白這是因爲模型從未真正改變過。

如何獲得輸入控件始終顯示模型的當前確切值？

這是本期的Plunker。

來源

2017-04-16 coder925

你需要去FormControl訪問，從the docs下面將改變模型：

如果您希望檢查相關FormControl的屬性（如有效性狀態），您還可以使用ngModel作爲關鍵字（例如：＃myVar =「ngModel」）將指令導出到本地模板變量中。
<input #name name="name" [ngModel]="firstName" #m="ngModel" (change)="onNameChange(name.value, m.control)"> 
，然後更新表單控件使用standard API：您然後可以使用

因此，更新模板，這個指令的控制屬性訪問控制

onNameChange(value: string, ctrl): void { 
    if (value == "") { 
     ctrl.setValue('John');

見the plunker。

這與ngModel指令的效果基本相同。 See the sources。

來源

2017-04-16 14:45:31

對此我很抱歉。在發佈問題並更新Plunker之後，我也注意到了錯誤。它現在應該工作。 – coder925

@ coder925，看我更新的回答 –

downvoter，小心解釋一下？ –

如果你還記得

「香蕉在箱子」

<input #name name="name" [(ngModel)]="firstName" (change)="onNameChange(name.value)">

來源

2017-04-16 14:41:46

謝謝，您的建議解決了問題！不幸的是，在我的真實場景中，我不允許直接用雙向綁定更新模型。你能想到其他任何方式通過單向保持綁定來達到相同的效果嗎？ – coder925

如果你告訴我哪種方式。 –

我需要像'[ngModel] =「firstName」'（從模型到控件）一樣保持單向綁定。 – coder925

力的輸入控制始終顯示勢必

回答

相關問題