标签: ngmodel

在尝试TDD时,我正在关注官方的Angular"Hero"快速入门教程.

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

一旦我到达替换步骤:

<input value="{{hero.name}}" placeholder="name">

同

<input [(ngModel)]="hero.name" placeholder="name">

我的Karma测试运行器抛出以下错误:

错误:模板解析错误:无法绑定到'ngModel',因为它不是'input'的已知属性.("name:] [(ngModel)] ="hero.name"占位符="名称">"):AppComponent @ 6:23预期未定义要定义.

但是,应用程序按预期工作,我在控制台中看不到任何错误.(而且我相当自信我正确地遵循了教程,看不到任何拼写错误等)

我的app.components.ts看起来像:

import { Component } from '@angular/core';

export class Hero {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    template: `
            <h1>{{title}}</h1>
            <h2>{{hero.name}} details!</h2>
            <div><label>id: </label>{{hero.id}}</div>
            <div>
                <label>name: </label>
                <input [(ngModel)]="hero.name" placeholder="name">
            </div>
    `
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

我的app.module看起来像:

import { NgModule }      from '@angular/core';
import { …

我正在尝试使用 ngModel 进行数据绑定，但是，我收到一个错误 ngForm not found。我已经在 app.module.ts 中包含了 formsmodule，如下所示。当我删除#grantAccessForm="ngForm"时错误消失，但是当我这样做并在输入字段中输入数据并提交时，我的页面刷新并且刷新的页面在 url 中有参数，如下所示：“http://localhost:8100 /signup?name=a&userName=a&email=a@email.com&password=aa&confirm=aa"

我希望能够在不刷新页面的情况下在 onSubmit() 函数中执行某些操作，有人可以向我解释#grantAccessForm="ngForm"这意味着什么以及为什么我会收到此错误。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { LoginPageComponent } from './login/login-page/login-page.component';
import { SignUpPageComponent } from './login/sign-up-page/sign-up-page.component';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    component: LoginPageComponent
  },
  {
    path: 'login',
    component: LoginPageComponent,

    //()=> import('./login/login-page/login-page.component').then(m=> m.LoginPageComponent)
  },
  {
    path: 'signup', …

在角度为2的ngModel中遇到问题.有一项任务是从组件类中的数组输出几个输入.发现了一种可能使ngModel从[name]属性中获取其值而不包含[()]中的ngModel.我想知道是否有办法为这些输入提供默认值.

personal-details.component.ts:

import {
    Component,
} from '@angular/core';

import { Input }from './Input'

@Component({
     selector: 'personal-details',
     styleUrls: ['personal-details.component.sass'],
     templateUrl: 'personal-details.component.html'
})
export class PersonalDetailsComponent {
     title: string;
     inputs: Input[] = [
         new Input('Name', 'text', 'Name', true, true),
         new Input('Surname', 'text', 'Surname', true, true),
         new Input('Mobile phone Number', 'text', 'phone', true, true),
         new Input('Date of Birth', 'text', 'birthday', false, true),
         new Input('Title', 'text', 'title', false, false),
         new Input('Title after name', 'text', 'title-after-name', false,     false),
         new Input('Personal number', 'text', 'personal-number', false, false), …

我正在设置计算其他两个ngModel的输入值,这似乎工作正常.但是,如果我检查我的ngModel,它根本不会改变.让我演示给你看:

<ion-item>
    <ion-label>Total price: {{product.totalPrice}}</ion-label>
    <ion-input 
        type="number"
        [value]="product.quantity * product.price"
        [(ngModel)]="product.totalPrice" 
        [ngModelOptions]="{ standalone: true }"></ion-input>
</ion-item>

所以这里{{product.totalPrice}}显示初始值,这很好.如果我手动更改输入,更改将反映在表达式上,这也没关系.但是这个输入将是只读的,它将由changin另外两个输入设置.当我更改它们时,我看到输入上的值正在更新,但不是标签中的表达式.那有什么不对？

这真的很奇怪,因为输入GETS UPDATED中的值,而不是表达式{{product.totalPrice}},我想这个值正在更新,因为其他字段是,但这些值更改从未实际触及ngModel

顺便说一下,我正在使用Ionic 2

由于ngModel即时更新如何延迟.

  <input type="text" value="{{item.task_name}}" name="task_name" [(ngModel)]="item.task_name" (ngModelChange)="update_fields([item.task_name])" >

我需要通过调用update_fields()来保存task_name,延迟时间为1秒,以避免即时调用服务.

谢谢

我正在从官方网站学习Angular 4 ,我通过ngModel来到双向数据绑定的部分.但是,一旦我将[(ngModel)]添加到我的组件模板,我的应用程序就会停止工作,即使在module.ts文件中导入了FormsModule.组件无法加载.
我正在使用Visual Studio Code.
这是我的app.component.ts

import { Component } from '@angular/core';

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }  

这是app.module.ts

import { FormsModule } from …

我不确定绑定和更新动态生成复选框的模型的正确方法.(这是一个最初使用Yeoman生成器创建的Angular 2的ASP.NET Core项目)或者我刚刚发现的一个简单的复选框.

下面是剥离代码,它有一个设施和时间段.每个设施可以有多个时隙.时间段复选框列表显示正常.初始数据表明只应检查一个时隙.但是当我加载一个设施时,所有的时间段都会被检查.它们没有像我预期的那样与ngModel绑定.

1. 如何修复它,以便只检查设施数据中包含的时隙而不是全部？
2. 如何将检查的内容绑定到ngModel timeslotids属性？我是否需要在组件上创建一个数组属性并操纵它而不是依赖于ngModel？(试过这个,但显然没有做到这一点,所以回到下面的代码)
3. 我似乎也有一个问题绑定到一个简单的复选框(haselectric),因为这也不是应该检查的时候.我错过了一个能解决所有问题的导入吗？

代码说明我有两个来自api的对象(设施和时间段),我绑定到接口.为简单起见,它们的属性显着降低:

export interface IFacility {   
   id: number,
   name: string,
   haselectric: boolean, 
   timeslotids: number[],    
   timeslots: ITimeslot[]

}
export interface ITimeslot {
    id: number,
    timeslotname: string    
}

这是Timeslots的JSON数据:

[{"id":1,"timeslotname":"Daily"},{"id":2,"timeslotname":"Hourly"},{"id":4,"timeslotname":"Market"}]

这是在更新之前单个Facility的JSON数据:

{"id":2,"name":"Clements Building","haselectric":true,"timeslotids":[1],"timeslots":[{"id":1,"timeslotname":"Daily"}]}

用于编辑设施的组件(facility.component.html):

<form #form="ngForm" (ngSubmit)="submitForm()" *ngIf="formactive">
   <input type="hidden" [(ngModel)]="updatedfacility.id" #id="ngModel" name="id" />
    <div class="form-group">
         <label for="name">Facility Name *</label>
         <input type="text" class="form-control input-lg" [(ngModel)]="updatedfacility.name" #name="ngModel" name="name" placeholder="Facility Name *">
   </div>
   <div class="form-group">
                    <label for="exhibitspaces">Has Electric *</label>
                    <input type="checkbox" class="form-control input-lg" [(ngModel)]="updatedfacility.haselecric" #haselectric="ngModel" name="haselectric">
    </div> …

我有一个Angular2指令的问题,应该执行以下操作:

• 检测用户是否输入"." 字符.
• 如果下一个字符也是'.',请删除重复的'.' 并将光标位置移动到'.'之后 烧焦

我有上述工作,但是,当与ngModel结合使用时,每次更新模型时光标位置都会跳到最后.

输入:

<input type="text" name="test" [(ngModel)]="testInput" testDirective/>

指令:

 import {Directive, ElementRef, Renderer, HostListener, Output, EventEmitter} from '@angular/core';

@Directive({
  selector: '[testDirective][ngModel]'
})
export class TestDirective {


  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();

  constructor(private el: ElementRef,
    private render: Renderer) { }

  @HostListener('keyup', ['$event']) onInputChange(event) {
    // get position
    let pos = this.el.nativeElement.selectionStart;

    let val = this.el.nativeElement.value;

    // if key is '.' and next character is '.', skip position
    if (event.key === '.' &&
      val.charAt(pos) === '.') …

我试图找到一种方法，在初始页面加载时以百分比（例如 97,52%）显示 html 输入字段（通过角度服务获取到后端的数据，即可观察/订阅），但也有这个输入字段松散它是我编辑时的百分比格式（即，当引发 DOM（焦点）事件时）。

format 的数据绑定到一个模型。让我们将模型字段称为 myModel.percentNumber，其中对于 '100 %' 为 percentNumber=1（对于 '69 %' 为 .69，或者对于 '10 000 %' 为 100）

因此，当我单击指示“97,52 %”的字段时，我希望它变为“97.52”，但模型中的数据绑定值应为 0.9752，因为这是我需要存储的。

该字段应该使用 ngModel 进行绑定。

注意：这应该适用于国际化，所以我不能使用基于删除空格、替换 '.' 的“肮脏”解决方案。by ',' ... 在这里你可以看到我举了一个例子，其中格式化的百分比值应该有一个逗号作为小数分隔符，一个空格作为千​​位分隔符，但这取决于用户的本地化。

到目前为止，我已经尝试了一些东西，但没有一个解决了所有问题。

1）使用2路绑定作为起点，即

<input [(ngmodel)]="myModel.percentNumber | percent:'1.2-2'">

...但它确实会导致管道出现问题：

未捕获的错误：模板解析错误：

2）从2路绑定短语法我想要长语法，即

<input [ngmodel]="myModel.percentNumber | percent:'1.2-2'" (ngModelChange)="myModel.percentNumber = $event">

这允许在初始加载时具有正确的百分比格式（在后端响应时，如果 myModel.percentNumber=0.9752 它正确显示为“97,52 %”），但是，当您单击输入进行编辑时它，当我希望它显示“97.52”时，格式会保持不变()，例如 PercentPipe.parse() 之类的东西（不存在）。这将需要为您应该具有此行为的每个字段添加一个（焦点）事件处理程序。可重用性会很低。我相信 angular Directive 方法应该更可取。

3) 带有角度指令：我创建了一个PercentFormatterDirective带有选择器percentFormatter 和percentDigits字符串类型输入的指令，该输入将接受与 PercentPipe 相同的格式（即 digitInfo）。一个使用示例是：

<input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber" (ngModelChange)="myModel.percentNumber = $event"> …

我有反应式表单的问题。当用户更改输入时更新模型类是直接的。但我需要做相反的方式：以编程方式更改模型，并查看 HTML 表单中的更改。

简化的代码是：

this.user = new User();

进而：

this.form = this.fb.group({
      name: new FormControl(this.user.name, [Validators.required]),
      email: new FormControl(this.user.email, [Validators.required])    
    });

假设它工作正常。如果用户在 GUI 中更新名称，this.user.name则正确更新。

假设我已经向 User 类添加了一些逻辑，它根据输入的名称填充电子邮件。每次名称更改时，电子邮件字段都会自动生成为“名称” @gmail.com

不幸的是，生成的电子邮件在 GUI 中不可见。如何做到这一点？

如何通知FormGroupUser 类中的变化？

我有两个想法：

1) 添加 ([ngModel]) - 它有效 - 但我觉得将 Reactive Forms 与 ngModel 混合是一个坏主意

2）在创建表单后添加以下代码：

this.form.controls["name"].valueChanges.distinctUntilChanged().subscribe(form => {
    this.form.patchValue({email: this.model.email});
});

但看起来并不干净。还有其他选择吗？