标签: angular2-forms

我创建一个自定义指令并将选择器值设置为" [unless-directive] ".

该指令获取一个布尔值并使用它来更改视图,如下所示:

import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';

@Directive({
    selector: '[unless-directive]',
    inputs: ['givenBoolean : myDirectiveFunction']
})

export class UnlessDirective {
    private _templateRef: TemplateRef;
    private _viewContainerRef: ViewContainerRef;


    constructor(_templateRef: TemplateRef, _viewContainerRef: ViewContainerRef) {
        this._templateRef = _templateRef;
        this._viewContainerRef = _viewContainerRef;
    }

    set myDirectiveFunction(condition: boolean) {
        !condition ? this._viewContainerRef.createEmbeddedView(this._templateRef)
            : this._viewContainerRef.clear();
    }
}

在我的模板中,我试图传递这样的条件:

<div name="customDirective">
    <h2>Custom Directive</h2>
    <div>
        Enter true or false:
        <br/>
        <input type="text" #condition (keyup)="0"/>
        <div *unless-directive [givenBoolean]="condition.value != 'false'">
            Only shown if 'false' wad enterded!
        </div> …

正如文章中所建议的:

https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

为了在RC2中使用新表单,我们需要使用以下代码禁用已弃用的表单:

import {disableDeprecatedForms, provideForms} from '@angular/forms';
bootstrap(AppComponent, [
   disableDeprecatedForms(),
   provideForms()
])

这显然意味着我们现在还需要在package.json中包含以下内容:

"@angular/forms": "2.0.0-rc.2",

但是当我将"@ angular/forms":"2.0.0-rc.2"添加到我的package.json并尝试恢复包时,它会给出以下错误:

npm ERR! node v6.2.1
npm ERR! npm  v3.9.3
npm ERR! No compatible version found: @angular/forms@2.0.0-rc.2
npm ERR! Valid install targets:
npm ERR! 0.1.0

有人可以指导吗？

我正在尝试查找信息，如果有任何内置验证器，请检查输入是否为正数？

我正在尝试构建以下内容：

static nonZero(control:Control) {
    if (Number(control.value) < 0) {
        control.setErrors({nonZero: true})
    } else {
    control.setErrors(null)
    }
}

但是，我不知道如何在表单生成器中使用它：

this.form = _formBuilder.group({
            field:['', Validators.required]})

我究竟做错了什么？

我有一个名为search的管道，我想将返回的管道值存储在这样的变量中（在我的模板中）

let searchedItems = items | search

有任何想法吗？

流:

1. 用户提交带有一些数据的表单,用户未填写的一些可选字段在mongo中保存为"null".
2. 稍后,用户决定编辑该表单.
3. 服务抓取表单并将其显示给用户.
4. 表单输入框显示"null",因为在步骤1中他没有填充它们.

所以,我创建了一个管道:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
name: 'transformNull'
 })

export class TransformNull implements PipeTransform {

transform(value) {
if (value == null) {
  return null;
 }
}

然后,在HTML中我试图分解ngModel:

[ngModel]="user.extraInfo | transformNull" (ngModelChange)="user.extraInfo.value=$event"

这导致了这个错误:

Cannot set property 'value' of undefined TypeError: Cannot set property 'value' of undefined

我试图用*ngIf ="isDataAvailable"延迟页面加载,错误消失,用户可以保存表单,值存储到mongo 但是当他刷新页面时,输入框为空.

然后我删除了*ngIf,添加了elvis运算符,但值错误又回来了.

我正在使用zone.js v0.7.4,试用0.7.2和0.7.5但没有运气.

我在这里错过了什么？

我在localStorage中存储了2个密钥,我想在我的模板中显示其中一个.我无法访问这些值.我甚至创建了一个接口,只是为了存储localStorage中currentUser键的值.应该如何实施呢？

这是当前的代码:

服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Md5 } from 'ts-md5/dist/md5';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    private defUrl = 'dummy-url.com';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'dummy-url.com' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());
    }

    parseUser(): any {
        return JSON.parse(localStorage.getItem('parseUser'));
    }

    getUser(): any {
        return …

题

:not(form)angular2的CSS选择器的一部分是什么形式的元素？

语境

当前有关表单的Angular2教程版本使用双向数据绑定，更改跟踪和验证来向表单元素添加CSS类。

他们的示例表格如下所示

他们的示例代码达到红色条状看起来像这样

.ng-invalid:not(form)  {
   border-left: 5px solid #a94442; /* red */
}

我在Angular 2中创建了一个表单，用户可以使用该表单编辑SearchProfile可以从列表中选择的表单。最初，一切正常，但是当我从SearchProfiles 列表中选择其他项目时，会收到以下异常： There is no FormControl instance attached to form control element with name: controlName。整个事情由3个部分组成：2层的组件SelectProfileComponent，SearchProfileComponent以及服务ProfileService。ProfileService包含ActiveProfile已选择SearchProfile进行编辑的。 ProfileService看起来像这样：

@Injectable()
export class ProfileService {
    private activeProfileSource = new ReplaySubject<ISearchProfile>();
    activeProfile$ = this.activeProfileSource.asObservable();

    constructor(private http: Http) {
        this.selectProfile();
    }

    public getSearchProfile(profileId: number = null): Observable<ISearchProfile> {
        let url = `<url>?profileid=${profileId}`;
        this.http.get(url).map((result) => {
            return <ISearchProfile>.result.json();
        });
    }

    public selectProfile(profileId: number = null) {
        this.getSearchProfile(profileId).subscribe((p) => …

我想知道是否有人可以帮助解释为什么我无法动态更改表单输入类型？

例如

<user-input type="{{ isActive ? 'password' : 'text' }}"></user-input>

不起作用。

但这有效

<user-input type="password" *ngIf="isActive"></user-input>
<user-input type="text" *ngIf="!isActive"></user-input>

用户输入

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

@Component({
    selector: 'user-input',
    templateUrl: './user-input.html'
})
export class UserInput {

    @Input()
    public isActive: boolean;

    constructor() {

    }
}

user-input.html

<input 
    type="{{ isActive ? 'password' : 'text' }}" 
    class="form-control"
    [(ngModel)]="value"
/>

user-input-password.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector:
      'input[type=password][formControlName],input[type=password][formControl],input[type=password][ngModel]'
})
export class PasswordValueAccessor {

    public pattern: RegExp;

    private regexMap = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

    @HostListener('keypress', …

我有拖放formBuilder，我们可以使用拖放创建表单，所以现在我面临的问题是，我在templeteJson的html中隐藏了字段。

这是HTML代码

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Form Name:</label>
      <input type="text" class="form-group" formControlName="TemplateName" />
    </div>
    <div class="form-group">
      <input type="hidden" class="form-group" formControlName="TemplateJson" />
    </div>
    <div class="form-group">
      <label>CreatedOn:</label>
      <input type="date" class="form-group" formControlName="CreatedOn" />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

这是component.ts文件

  formBuilder: any;
  formData: any;
  data: any;
 ngOnInit() {
    var id = this.route.snapshot.paramMap.get('id');

    this.dataService.GetFormById(+id).subscribe(response => {
      this.data = response['TemplateJson'];
      this.generateForm();
    },
      err => {
        this.generateForm();
      });

    initJq();
  }

userForm = new FormGroup({
    TemplateName: new FormControl(),
    TemplateJson: new FormControl(),
    CreatedOn: new FormControl(),
  });

 onSubmit() …