Question

我的组件如下所示：

@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;
    }
  }
}

如果用户删除所有文本然后离开输入控件，则输入控件不会像我预期的那样返回默认文本 John 。我知道这是因为模型从未真正改变过。

如何让输入控件始终显示模型的当前确切值？

以下是此问题的Plunker。

Answer 1

您需要the docs来访问FormControl：

如果要检查关联的FormControl的属性（如有效状态），您也可以将指令导出到本地使用ngModel作为键的模板变量（例如：#myVar =＆＃34; ngModel＆＃34;）。您然后可以使用指令的控件属性
访问控件

所以，将模板更新为：

<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

Answer 2

如果您记得

，以下内容将更改模型

＆＃34;盒子里的香蕉＆＃34;

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.example.ashish.internchat"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
    compile 'com.google.firebase:firebase-auth:10.0.1'
    compile 'com.google.firebase:firebase-database:10.0.1'
    testCompile 'junit:junit:4.12'
    compile 'com.firebaseui:firebase-ui-database:1.2.0'
}







apply plugin: 'com.google.gms.google-services'

强制输入控件始终显示其绑定的值

2 个答案: