标签: angular-ngmodel

我想知道什么时候我必须在我的输入中使用 [(ngModel)] 以及什么时候我可以只使用 #reference 例如

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" [(ngModel)]="newUser">
    <button class="btn btn-outline-success" (click)="onAddUser()">Add user</button>
  </div>
</div>

我应该在这里这样做，或者我可以这样做：

<div class="form-group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" #newUser>
    <button class="btn btn-outline-success" (click)="onAddUser(newUser.value)">
      Add user
    </button>
  </div>
</div>

我将不胜感激任何答案）

我有 angular 6 项目。我同时使用了 ngModel 和 formControlName。但是 angular 在下面给了我警告。例如，当我从网格中的按钮打开更新弹出窗口时，我可以轻松地自动绑定更新弹出窗口中的输入。但是 angular 7 说删除 ngModel。因此，我必须始终将所有内容映射到我的学生对象。最好的方法是什么？我们可以在下面的代码中给 formValueType 像 studentObject 这样的表单值，然后它可以自动绑定吗？

角度警告：

     It looks like you're using ngModel on the same form field 
as formControlName. Support for using the ngModel input property and 
ngModelChange event with reactive form directives has been deprecated
 in Angular v6 and will be removed in Angular v7.

我的HTML

<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
  <p-dialog>
    <div class="ui-g-12 form-group">
      <div class="ui-g-4">
        <label>Name Surname</label>
      </div>
      <div class="ui-g-8">
        <input pInputText [(ngModel)]="selectedStudent.nameSurname"  formControlName="nameSurname" />
      </div>
    </div> …

我想将图像 src 显示为动态变量，我在名为 displayImage 的变量中声明了一个默认值作为字符串：

<div class="col-6 " style="margin-top: 35px;">
  <div class="row">
    <div class="col-6">
      <img src="assets/cardsModels/Anniversaire.png" alt="">
    </div>
  </div>
</div>

**

this.displayedImage = 'assets/cardsModels/Anniversaire.pnf'

this.displayedImage 在构造函数中声明，图片未找到，无法显示！

我有一些逻辑,在某些Senario,我想要第一个复选框一直检查.因此,如果用户尝试取消选中它,我想使用ng-click将绑定的ng-model更改为"true".但复选框仍未取消选中....

我如何实现保持复选框保持基于ng-model的值检查,而不使用angular.element(elem).attr("checked",true)之类的东西

<input type = 'checkbox' ng-model = 'checkboxValue' ng-click = "handler"/>

在控制器中

$scope.checkboxValue = false;
$scope.handler = function(){
    $scope.checkboxValue = true;
}

我希望复选框保持检查,因为ng-model checkboxValue是真的......但显然我在这里错过了一些东西

以下是plunker:http://plnkr.co/edit/WbjZilFLDfbP3mQ4oMgx？p = preview

我进入调用堆栈,看起来我将ng-model设置为true,然后在$ digest期间,ng-model根据复选框的状态设置:选中或取消选中.所以它更像是单向绑定:根据复选框状态绑定ng-model？

正如在这个plunker中所展示的,我想要一个<input type ="number"/> <input type ="range"/>,它们既可以更新相同的$scope变量,也可以互相更新.

现在,当我更新一个输入时,$ scope变量被更改,但另一个范围的值被消隐.我只需要使用data-ng-model绑定一个并在另一个上使用data-ng-change吗？有更清洁的解决方案吗？

我正在尝试使用角度数组绘制radioBoxes,然后获得已检查无线电的值,但模型不会改变它的值,任何人都可以帮我这个吗？

HTML部分

<div ng-app>
    <div ng-controller="CustomCtrl">
        <label ng-repeat="user in users">
            <input type="radio" name="radio" ng-model="radio" value="{{user.name}}" /> {{user.name}} 
        </label>
        <br/>
        {{radio}}
        <br/>
        <a href="javascript:void(0)" ng-click="saveTemplate()">Save</a>
    </div>
</div>

角部

function CustomCtrl($scope) {
    $scope.radio = "John";
    $scope.users = [
        {"name" : "John", "Year" : 18},
        {"name" : "Tony", "Year" : 19}
    ];

    $scope.saveTemplate = function() {
        console.log($scope.radio);
    };
}

你可以在这里看到例子 - http://jsfiddle.net/hgf37bo0/2/

我使用角度js绘制选择框.

 <select ng-model="selected">
     <option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
 </select>
 selected id - {{selected}} 

此处未根据值初始化所选的默认值selected.

为这个问题做了一个小提琴.

这是我的选择:

<select class="form-control" ng-options="assistanceType as assistanceType.name for assistanceType in assistanceTypes" ng-model="selectedRecord.assistanceType"></select>

这是我用来加载援助类型的内容:

$scope.getAssistanceTypes = function () {
    $http.get('/api/assistanceType/getAll').
    success(function (data, status, headers, config) {
        $scope.assistanceTypes = data;
    }).
    error(function (data, status, headers, config) {
        alert(data.ExceptionMessage);
    });
}

这是结果:

    [
  {
    "assistanceTypeId": 1,
    "name": "Essay"
  },
  {
    "assistanceTypeId": 2,
    "name": "Resume"
  },
  {
    "assistanceTypeId": 3,
    "name": "Test"
  }
]

一切正常,我可以在更改选项时看到模型正在更新.

但是当我加载记录($ scope.selectedRecord)时,所选选项不会反映aidType对象!

这是"selectedRecord":

{
  "recordId": 1,
  "student": {
    "id": "xxx",
    "firstName": "xxx",
    "lastName": "xxx"
  },
  "createDate": "2015-03-04T15:35:40",
  "closeDate": "2015-03-04T15:35:40",
  "checkInDate": "2015-03-04T15:35:40", …

我想使用angular2数据绑定以编程方式更新TextField文本属性.从这里看起来我会在我的布局中设置[(ngModel)] ="email"然后在我的代码中添加一个属性电子邮件.使用当前设置,我可以在加载时更改文本属性,但是如果我尝试以编程方式从按钮更改文本属性,则单击对电子邮件的更改不会反映在视图的TextField文本属性中.

import { Component, OnInit } from '@angular/core';
import { User }              from '../../shared/user/user';
import { LoginModel }        from '../../model/login/login-model';
import { HttpService }       from '../../services/http/http-service';

@Component({
    selector:'login',
    templateUrl:'pages/login/login.component.html',
    providers: [HttpService]
})

export class LoginComponent implements OnInit {
    email:string = "test@live.com";
    user: User;
    //model: LoginModel;
    constructor(private _httpService: Httpservice) {
        //this.model = new LoginModel();
        this.user = new User();
    } //default constructor

    ngOnInit() {}

    onButtonTap() {
        //alert("onButtonTap clicked ");
        //this._mpixService.register(this.model.user);

        this.email = "Changed@live.com";
        alert("onButtonTap clicked " + this.email);
    } …

我正在AngularDart中构建一个应用程序，到目前为止一切顺利。我特别喜欢它使表格变得如此容易。但是，我在这方面遇到了一些障碍。

基本上，我想做的是让给定表单元素的ngModel处理不同的数据类型，并根据需要在两者之间来回转换。例如，我<input type='number'/>在HTML中使用一个元素，但在dart业务逻辑方面，我想将该值作为Dart Decimal类处理（来自此处：https：//pub.dartlang.org/packages/小数）），因为我需要避免浮点问题。

我在我的应用程序中大量使用了2路数据绑定和ngModel，因为它很棒并且可以很好地在此应用程序中使用。但是，ngModel在此特定情况下不起作用。显然，我可以解决这个问题，但是我希望有更多的优雅。我希望能够指定一些类或函数，使我可以使用ngModel进行类型转换。

我在Google和文档中四处浏览，怀疑我的解决方案与使用Form Control有关，尽管我对这到底是如何工作有些困惑。我很难找到与我想做的事情相关的示例代码或文档。也许我在那儿树错了树。

这是一个超级简化的示例，说明如果我能确定自己需要做什么，可以完成的工作：

@Component(
  selector: 'my-component',
  template: '...<input type="number" [(ngModel)]="thing.attr"/>...'
)
class MyComponent{

  DataObject thing = new DataObject();
}

class DataObject{
  Decimal attr;
}

我想这是我可能会遇到的很多事情，需要进行类型转换，而不仅仅是在这种情况下专门针对Decimal类，因此任何人的任何帮助或建议都将不胜感激。

更新资料

根据以下Ted Sander的回答，我可以取得一些不错的进步，但是它对我来说还不是很有效，我不确定为什么。

这是我最终得到的代码：

import 'package:angular/angular.dart';
import 'dart:html';
import 'package:angular_forms/angular_forms.dart';

import 'package:decimal/decimal.dart';

@Directive(
  selector: 'input[type=decimal][ngControl],'
      'input[type=decimal][ngFormControl],'
      'input[type=decimal][ngModel]',
)
class DecimalValueAccessor implements ControlValueAccessor {
  final InputElement _element;

  DecimalValueAccessor(HtmlElement element) : _element = element as InputElement;

  @HostListener('change', ['\$event.target.value'])
  @HostListener('input', ['\$event.target.value'])
  void handleChange(String value) …