相关疑难解决方法(0)

给定一个简单的输入元素,我可以这样做:

<input [(ngModel)]="name" /> {{ name }}

这不适用于我的自定义元素:

<my-selfmade-combobox [(ngModel)]="name" values="getValues()" required></my-selfmade-combobox>

我该如何实现它？

由于我使用了大量相同指令和.css类的输入,我想将重复的代码提取到某个组件,如下所示:

  @Component({
  selector: "app-input",
  template: `
    <div class="...">
      <input type="..." name="..." class="..." [(ngModel)]="value" someDirectives...>
      <label for="...">...</label>
    </div>
  `,
  ...
  })
  export class InputComponent implements OnInit {
    // some implementation connecting external ngModel with internal "value" one
  }

这里的问题是以这样的方式创建一个组件,它可以与ngModel一起用作普通输入:

<app-input [(ngModel)]="externalValue" ... ></app-input>

我在互联网上找到了几个可以部分或完全过时的解决方案,如: Angular 2自定义表单输入 这可以在角度6中以更好的方式完成吗？

我在Angular 2.0(<my-select>)中创建了一个自定义元素,当我在组件上包含ngModel属性时,我立即遇到以下错误:

EXCEPTION: No value accessor for '' in [myModel in App@0:195]

这是一个吸烟者:http://plnkr.co/edit/wlkPWcB92YZASCwCnmcw？p =preview

(打开控制台查看错误)

如果您只是注释掉以下行src/app.ts,则组件将正确呈现:

'[ngModel]="myModel"'

我做了以下事情:

1. 进口{FORM_DIRECTIVES}自'angular2/common'
2. 包含FORM_DIRECTIVES在directives部分内容中@Component
3. 初始化 myModel

我在这里错过了什么？

在Angular2 中进行解析器和格式化的方法是什么？

在Angular1中,可以使用ngModelController进行这样的操作:

//model -> view
ngModelController.$formatters.push(function(modelValue) {
  return modelValue.toUpperCase();
});

//view -> model
ngModelController.$parsers.push(function(viewValue) {
  return viewValue.toLowerCase();
});

你能给我一个如何用Angular2做的例子吗？

UPD:管道类似于Angular1中的过滤器,但我不是寻找过滤器,而是针对ngModel的分析器和格式化器.所以"管道"不是正确的答案.

有没有办法制作双向绑定输入组件,也可以在组件内部进行验证？

我想要实现的是有一个组件,我可以在我的表单中排列如下:

<form #f="ngForm">
            <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input>
            <my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"></my-form-input>
...
            <my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input>

</form>

我有以下设置,无法弄清楚,如何使其正确:

组件:

import {Component,Input, Output,EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES}    from 'angular2/common';

@Component({
  selector: 'my-form-input',
  directives: [FORM_DIRECTIVES],
  template:
    `
    <input type="text" class="form-control"  id="i1" required [ngModel]="inputModel" (ngModelChange)="onChangeInput($event)" ngControl="ctrl" #ctrl="ngForm"/>
    <p>{{"Is field valid? I would like to make some decisions here depending on that: "+ctrl.valid}}</p>

  `
})
export class InputComponent {

  constructor(){};

  @Input()  inputField:string;
  @Input()  inputModel: Object;
  @Output() inputModelChange = new EventEmitter();

  onChangeInput(event){
    this.inputModel=event;
    this.inputModelChange.emit(event);
  }
}

该应用程序: …

我有ParentComponent和ChildComponent,我需要将ParentComponent中的ngModel传递给ChildComponent.

// the below is in ParentComponent template
<child-component [(ngModel)]="valueInParentComponent"></child-component>

如何在ChildComponent中获取ngModel的值并进行操作？

我正在使用Angular 2 beta 5.

这是我的观点:

<textarea [(ngModel)]="pendingMessage" (keydown.enter)="sendMessage()"></textarea>

这是我的组件:

@Component({
    //...
})
export class AppComponent {
    private _pendingMessage: string;

    public get pendingMessage() {
        return this._pendingMessage;
    }

    public set pendingMessage(value: string) {
        this._pendingMessage = value;
    }

    constructor() {
        this.pendingMessage = "initial stuff"; //this shows up in the text field initially
    }

    public sendMessage() {
        console.log(this.pendingMessage); //here, pending message is indeed whatever I typed in the text field
        this.pendingMessage = "blah";
        //here I expected the textfield to now contain "blah", but it …

您好我想创建一个自定义对话框组件,我想以声明方式插入内容,应该如下所示:

app.action.dialog.component.ts:

@Component({
    selector: 'app-action-dialog',
    templateUrl: 'app/template/app.action.dialog.component.html'  
})
export class ActionDialog {

    showing: boolean;

    constructor() {
        this.showing = false;
    }

    show() {
        this.showing = true;
    }

    hide() {
        this.showing = false;
    }
}

app.action.dialog.component.html:

<div id="overlay" class="valign-wrapper" 
    *ngIf="showing" (click)="hide()">
    <div class="container valign">
        <div class="card">
            <div class="card-content">
                <content select="[content]"></content> 
            </div>
        </div>
    </div>
</div>

用法示例:

<app.action.dialog>
    <div content> example </div>
</app.action.dialog>

这不起作用,我该怎么做？可能吗？

关于ngModel和DI的高级问题.

我可以在这里看到= https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/ng_model.ts#L68 ngModel wating供应商来自NG_VALUE_ACCESSOR OpaqueToken.这意味着如果我想创建应该支持ngModel绑定的自定义组件,我应该将我对ValueAccessor的实现传递给DI.所以我脑子里有两个问题.

1)我该怎么做？

2)<input>元素的默认ValueAccessor是什么？如何让它继续工作并仅使用我的自定义组件？

顺便说一下,我在这里看到:https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/shared.ts#L102 defaultValueAccessor是最后一个.所以这意味着如果我全局通过我的ValueAccessor通过DI系统而不是默认的从未返回过.

我创建了一个简单的组件，它包装了 bootstrap 的 typeahead 控制器，因此它按照我想要的应用程序配置方式进行配置。该组件有一个公共变量，selectedWorker即ngModel来自预输入的变量。

所以现在，当我在其他地方使用这个组件时，我想做这样的事情：

<app-worker-lookup [(ngModel)]="foo"></app-worker-lookup>

然后将foo调用者的变量绑定到具有所选值的查找组件的公共变量。我不知道如何实施。