标签: angular2-ngmodel

我有JQuery UI的datepicker工作在我的角度2应用程序,但它没有更新我的ngModel.我有一个名为的变量SeasonStartDate,我想更新到用户输入的任何日期.当我在日期选择器中选择日期时,例如10月31日,我的输入将填充10/31/2016,正如我所料,但未ngModel成功更新.

这是我的意见:

<input [ngModel]="SeasonStartDate" (ngModelChange)="updateSeasonStartDate($event)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" type="text" autocomplete="off">
Date: {{SeasonStartDate}}

我Date: {{SeasonStartDate}}在输入下面添加了以便我可以测试该值是否正在更新.

以下是我的组件中更新值的代码:

updateSeasonStartDate(updateSeasonStartDate: any) {
    console.log(updateSeasonStartDate);
    this.SeasonStartDate = updateSeasonStartDate;
}

如果我删除了date-picker类(启动日期选择器所需的)并且我只是手动输入输入,SeasonStartDate将按预期更新,所以我知道我的其余代码工作,它只是最终破坏它的日期选择器.我怎样才能ngModel和JQuery UI Datepicker一起工作？这可能吗？我知道还有其他日期选择器专门用于Angular 2,但如果可能的话我更喜欢JQuery的版本.

我一直在尝试使用 ngModel 对输入元素进行单向和双向绑定。

我希望从视图绑定到模型，以捕获用户输入。我可以通过在组件中创建一个变量（例如someVar ）并在相应的视图模板中使用[(ngModel)]="someVar"绑定到它来实现这一点。

我知道这是[ngModel]="someVar"和(ngModelChange)="someVar=$event" 的语法糖。

但是，如果我省略模型以查看绑定，即[ngModel]="someVar"，则someVar的值保持未定义。

我无法理解这种行为，因为省略模型绑定的视图不会导致任何问题。

我有一个选择下拉列表的以下代码:

<select id="UnitOfMeasurementId" name="UnitOfMeasurementId" [(ngModel)]="UnitOfMeasurementId">
    <option *ngFor="let unit of UnitOfMeasurements" [ngValue]="unit.Value" [selected]="unit.Selected">{{unit.Text}}</option>
</select>

UnitOfMeasurements数组中的每个项看起来像这样:

Selected: false
Text: "lb"
Value: "1"

或这个:

Selected: true
Text: "kg"
Value: "3"

[(ngModel)]="UnitOfMeasurementId"包含应选择的项的值.在此特定示例中,该值为3,因此应选择第3个项目.果然,当我检查它显示ng-reflect-selected="true"在正确项目上的元素时,实际上没有选择任何东西.如何才能获得列表中的正确项目以实际动态选择而不是仅添加ng-reflect-selected="true"属性？

我想创建包含其他自定义控件的自定义控件,并使用连接所有自定义控件的ngModel.喜欢 :

PersonSearchComponent:

• DeveloperSearchControl
  • 名称 - 一些字符串输入
  • 姓
  • ProffesionSelect - 期望ProffesionModel的自定义控件
• BuildingSearchControl
  • 这里有一些自定义控件
• CountryCustomControl - 期望CountryModel的自定义控件

• PersonListComponent: - 由某些服务导入有关PersonSearchComponent中项目的数据

• SomeOtherSearchComponent
  • DeveloperSearchControl - 可重用

所以现在我有工作版本,但我认为我做了一些坏事(也许我应该使用FormBuilder):

PersonSearch模板:

    <div>
            <developer-search-control [(ngModel)]="searchModel.developerSearchModel"></developer-search-control>
            <building-search-control [(ngModel)]="searchModel.buildingSearchModel"></building-search-control>
            <country-select [(ngModel)]="searchModel.countryModel"><country-select>
    </div>

ParentSearch组件

...
export class PersonSearch {
  @Output() searchDataEmitter= new EventEmitter();//Exports data to above component which contains this, and listComponent
searchModel : PersonSearchModel : new PersonSearchModel();

    performSearch()
    {
        //gets data from service with searchModel and searchDataEmitter transpors it to above component
    }
}

型号:PersonSearchModel:

developerSearchModel : DeveloperSearchModel = …

我目前了解这[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我也理解这[ngModel]="expression"是一种单向绑定（我相信从组件到视图？）。然后有可能(ngModel)="expression"。我[ngModel]对VS 之间的区别感到困惑(ngModel)。有人可以解释一下吗？

编辑：经过研究，并回顾了@Rohan Fating给出的文档片段后，我意识到类似的东西(ngModel)应该带有一个声明，而不是一个表达式。话虽这么说，是否会有适当的时间使用类似的东西，(ngModel)或者在任何情况下都可以使用？

我有一个输入字段，用户可以在其中输入事物的速率。

当用户输入值时，我希望将其四舍五入后再显示，然后将更新后的值存储在ts文件的后备模型中。

使用Angular管道不利于此，因为一个方向的管道和更新后的值不会反映在模型上。

因此，为了使其双向，我正在执行以下操作：

<input type="text" [ngModel]="model.rate" (ngModelChange)="model.rate=roundRate($event)" name="rate" />

该roundDate功能看起来像这样

roundRate(value) {
    return Math.round(value);
}

现在，当我输入5.6、7.8、9.5等值时，它们都被四舍五入，显示并分别在模型上存储为6、8和10，这是预期的行为。

当我输入2.1、3.4、5.3等时，问题开始。在这种情况下，该roundRate函数被调用，并在四舍五入后返回值。但是屏幕上显示的值仍然是旧值（2.1、3.4、5.3）

我检查了inputChrome上的元素，发现该ng-reflect-model属性已更新为预期值（2、3、5）。

<input _ngcontent-c39="" name="rate" type="text" ng-reflect-name="rate" ng-reflect-model="5" class="ng-valid ng-dirty ng-touched">

有人可以解释一下这里发生了什么吗，尽管ng-reflect-model属性已更新，但为什么屏幕仍显示旧值？

谢谢你的帮助！

我想在角度2应用程序中显示可选对象的集合(RC 5,形式0.3.0)

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item">
    {{ item }}
  </option>
</select>

<div> {{ selectedItem }} </div>

列表本身已正确显示.

但是'selectedItem'显示的所有内容都是[object Object].在代码中访问项目时,我得到相应的字符串"[object Object]".我尝试切换到ngValue但产生相同的结果.

当我使用原始值而不是对象时,整个过程都有效.但我怀疑我在这里错过了一些关键点.

谢谢你的帮助.我一直在互联网搜索和反复试验上浪费了几个小时.也许有人遇到过同样的问题.

编辑(24-08-16):我遇到了这个教程,它解释了如何创建常用窗体小部件.也许对于登陆此页面的人有用:https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

我不知道这是一个问题还是正常行为.

如果我们有这样的表格:

<form #form="ngForm" >
  <div>
     <label>field1</label>
     <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar"  />                                                                                                                    
  </div>
  <div>
     <label>field2</label>
     <input type="text" name="field2" [(ngModel)]="someVar" />
  </div>
</form>

同时变量mainVar和someVar在组件中设置为空字符串:

mainVar = '';
someVar = '';

这将导致名称field1被禁用的输入,即使someVar为空字符串.据我所知,变量是空字符串,应该返回false到if语句.

但最奇怪的是,如果我从输入field1中删除[(ngModel)]属性,它将按预期工作(如果我在输入field2中键入内容,则输入field1将被禁用)

Plunker的例子

我将通过选中的复选框（已迭代）传递给ngModel时遇到问题。

    <label class="btn btn-outline-secondary" 
     *ngFor="let test of tests"  >
      <input type="checkbox">
    </label>

在ts中我有模型：

     testData = <any>{};

this.tests = [{
    id: 1, name: 'test1' 
  },
  {
    id: 2, name: 'test2' 
  },
  {
    id: 3, name: 'test3' 
  },  
]

我尝试使用ngModel和ngModelChange，但是在显示选中复选框时仍然有问题。我怎样才能做到这一点？

我在ngModel的Sample中有两个单选按钮。

<div id="container">
    <input type="radio" id="radiobuttonstoerung1" label="Blinkend" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
          value="true"/>
    <input type="radio" id="radiobuttonstoerung2"  label="Dauersignal" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
  value="false"/>
</div>

当我传递布尔变量时，它不起作用。

export class RadioButtonController implements OnInit {
    project = { modelvalue: true };
}

样本链接： https : //stackblitz.com/edit/angular-cxt8bs-quvb7y?file=radiobutton.html

情景当我通过“stoerungBlinkend”为真，单选按钮与价值=“真实”应该进行检查。如果我将其传递为false，则应检查值为=“ false”的RadioButton。

我已经找到了解决方法，但是没有人能详细解释为什么上述情况不起作用吗？