标签: angular-ngmodel

我有一个指令，它通过 ngModelCtrl.$setViewValue() 在模糊上操作输入字段的 $viewValue。

function _onFocus () {
    presentation = false;
    if(!ctrl.$isEmpty(ctrl.$modelValue)) {
      ctrl.$setViewValue(String(ctrl.$modelValue).replace(/\./, ','));
      ctrl.$render();
    }
  }

普朗克

由于这只是外观问题，我想知道是否有可能在不改变输入字段本身的 $pristine/$dirty 状态的情况下设置 ViewValue。

参考 Angular：$commitViewValue 上的 $setDirty

谁能告诉我是否可以在自定义 Angular 指令的控制器中要求和使用 ngModel 。我试图远离链接功能。我看到大多数示例都使用链接函数，但我认为必须有某种方法可以在指令控制器内使用它？或者只能在链接函数中访问？我见过的一种方法（如下所示）给了我未定义的信息。不知道还有没有其他方法？？我正在尝试验证组件并在错误对象上设置无效的类。

//directive
angular.module('myApp', [])
  .directive('validator', function (){
    return {
      restrict: 'E',
      require: {
           ngModelCtrl: 'ngModel',
           formCtrl: '?^form'
      },
      replace: true,
      templateUrl: 'view.html',
      scope: {},
      controllerAs: 'ctrl',
      bindToController: {
         rows: '=',
         onSelected: '&?' //passsed selected row outside component
         typedText: '&?' //text typed into input passed outside so developer can create a custom filter, overriding the auto
         textFiltered: '@?' //text return from the custom filter
         ngRequired: "=?" //default false, when set to true the component needs to validate …

如何在多选中设置默认选定值。我从数据库中获取current_options和all_options我想更新current_options并再次发送新值做数据库。

更新数据库有效，但当我刷新页面时，没有选择任何选项。

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

我的模板：

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`

我在 mat-dialog 中有一个显示多个字段的表单。它们中的大多数都是输入并且工作完美，它们与 [(ngModel)] 绑定，如下所示，但我想要一个带有 mat-chips 和自动完成功能的字段（如下所示）。我的问题是我不知道如何将所选芯片与 [(ngModel)] 绑定以获取数据。

我的HTML：

<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
<div class="form">
  <mat-form-field color="accent">
    <input matInput #inputname class="form-control" placeholder="Nom du WOD" [(ngModel)]="data.name" name="name" maxlength="50" required >
    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
    <mat-hint align="end">{{inputname.value?.length || 0}}/50</mat-hint>
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field color="accent">
    <input matInput placeholder="Notes du coach" [(ngModel)]="data.coachesNotes" name="coachesNotes">
  </mat-form-field>
</div>

<div class="form">
  <mat-form-field class="chip-list" aria-orientation="horizontal">
    <mat-chip-list #chipList [(ngModel)]="data.movementsIds" name="movementsIds">
      <mat-chip
        *ngFor="let mouv of mouvs"
        [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(mouv)">
        {{mouv}}
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>
      <input
        placeholder="Ajouter un …

我的 Angular 7 应用程序中有以下应用程序结构：

AppModule
DashboardModule
  DashboardChild1
  DashboardChild2
  DashboardChild3
  DashboardService
AdminModule
  AdminChild1
  AdminChild2
  AdminChild3

我想有只在DashboardService DashboardModule，所以我跟着这个链接providedin-和ngmodules。

这是我的DashboardService：

import { Injectable } from '@angular/core';
import { DashboardModule } from './dashboard.module';

@Injectable({
  providedIn: DashboardModule
})
export class DashboardService {
  .......
}

我在 DashboardChild1 组件中使用了该服务，但出现以下错误：

检测到循环依赖项中的警告：src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts - > src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts

检测到循环依赖项中的警告：src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component.ts -> src/app/dashboard/dashboard.service。 ts -> src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts

检测到循环依赖项中的警告：src/app/dashboard/dashboard.module.ts -> src/app/dashboard/dashboard-routing.module.ts -> src/app/dashboard/dashboard-child1/dashboard-child1.component。 ts -> src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts

检测到循环依赖项中的警告：src/app/dashboard/dashboard.service.ts -> src/app/dashboard/dashboard.module.ts …

在 Angular 2+ 中，是否可以以编程方式将输入的值重置为其先前的值？

我有“选择”下拉列表，因此如果某些验证失败，则选择一个值我需要将其值重置为前一个值。

如何使用 ngModel（模板表单）和 formControl（反应表单）实现相同的效果？（只需要知道这两种方法是否可行）。

我已经发现，如果我们将 ngModelChange 事件放在模板中 select 标记中的 ngModel 之前，那么在 ngModelChange 事件中，我们会在更改之前获得 ngModel 的值。参考：https : //github.com/angular/angular/issues/11234

但我认为这种方法并不简洁，有时可能会令人困惑。

我无法测试使用带有 ngModel 的自定义组件的组件

HTML 代码如下所示（在下面的 repro 中查看更多信息）

<custom-control name="formCode" [(ngModel)]="testValue"></custom-control>

该代码在我的应用程序中运行，但在我的测试中失败并出现以下错误

Uncaught Error: Uncaught (in promise): Error: No value accessor for form control with name: 'formCode'

错误：没有名称的表单控件的值访问器：'formCode'

测试是用茉莉花运行的

我尝试了不同的导入，但似乎没有一个能解决我的问题

重现代码在这里：https : //stackblitz.com/edit/angular-test-ng-model

我已经想出了静态(硬编码)多列过滤; 在这里.

<p><input type="text" ng-model="s1"></p>
<p><input type="text" ng-model="s2"></p>

<ul>
<li ng-repeat="x in names | filter:{name:s1} | filter:{country:s2} | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

但是,我希望能够根据模型动态创建文本框过滤器(即任何列数).看起来它应该是这样的,但文本框什么都不做.

<div ng-repeat="n in names">
    <input type="text" ng-model="n.column" >
</div>

<ul>
  <li ng-repeat="x in names | filter:{name:name} | filter:{country:country} | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

我四处搜索,我发现很难相信这样的事情还没有完成[通常足以让我的搜索找到].

任何帮助表示赞赏.

这段代码适用于angular-1.2.26,但不适用于angular-1.3.0.rc5(或我试过的任何1.3.x版本).

我在angular的github上发现了这个问题https://github.com/angular/angular.js/issues/9218,但是我不熟悉github接口,我无法弄清楚bug是否被确认或是否有预期的行为,如果它已被修复; 如果是,我应该采取什么版本.

JSFiddles:

• 使用角度v1.2.26,ngModel作为对象
• 使用角度v1.3.0.rc5,ngModel作为对象

对于每一个,我希望在加载页面时在输入中有"我的标签".它适用于第一个,但不适用于第二个.

然后查看控制台以查看传递给formatter的值.

HTML:

<div ng-controller="ctrl as c">
    <input my-dir ng-model="c.foobar" />
    <pre>{{c.foobar | json}}</pre>
</div>

JS:

var app = angular.module('app', []);

app.controller('ctrl', function(){
    this.foobar = {
        value : 'my value',
        label : 'my label'
    }
})


.directive('myDir', function(){
    return {
        restrict :'A',
        require:'ngModel',
        link : function(scope, elt, attrs, modelCtrl){

            // conversion "view -> model"
            modelCtrl.$parsers.unshift( function(value){
                console.log('Value:', value);
                return {label:value, value:value};
            })

            // conversion "model -> view"
            modelCtrl.$formatters.unshift(function formatter(modelValue){
                console.log('modelValue:', modelValue);
                return …

$scope.add=function()
                {
                    //How to retrieve the value of textbox
                }

<input type='text'><button ng-click='add()'></button>

当我单击按钮时,如何检索控制器中的文本框值并动态地将该值添加到表中？