标签: angular2-forms

我不理解angular2网站的这一段:

我们在最后输入了一个诊断属性,以返回我们模型的JSON表示.它将帮助我们了解我们在开发过程中所做的工作; 我们给自己留了一张清理笔记,以便以后丢弃.

链接在这里

这是什么意思

我有一个复选框,需要根据函数结果显示为选中,而不是将其绑定到对象属性.

这很容易,但不可能:

<input type="checkbox" ([ngModel])="category.selected">

这不起作用,因为甚至会checked="false"导致复选框显示为已选中:

<input type="checkbox" [attr.checked]="isCategorySelected(category.id)"/>

我需要这样的结果

<input type="checkbox">
<input type="checkbox" checked>

取决于结果isCategorySelected(id).

任何帮助表示赞赏.

我正在将一个项目从angular2 RC4迁移到RC6,我有一个需要的自定义Form Validator Http.在迁移之前我使用了ReflectiveInjectorwith HTTP_PROVIDERS,但是使用了RC6,这已经不再可能了,因为HTTP_PROVIDERS已经弃用了,分别不再存在了.这是Validator中的静态方法:

    static checkVat(control: FormControl) {
    let checkVatUrl = "http://localhost:8080/checkvat";


    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
    let http = injector.get(Http);
    let authHttp = new AuthHttp(new AuthConfig(), http);

    if (control.value === "") {
        return new Observable((obs: any) => {
            obs.next(null);
            obs.complete();
        });
    } else {
        return authHttp.get(checkVatUrl + "/" + control.value)
            .map((data: Response) => {
                if (data.json().valid) {
                    return null;
                } else {
                    let reason = "isNotValidVat";
                    return {[reason]: true};
                }
            })
            .catch(function (e) …

我正在尝试使用Reactive Forms模块在Angular 2中构建注册表单.因此,我有一个为表单定义的FormGroup,然后我可以在其中列出每个FormControl的验证器.

考虑这个部分类:

export class TestFormComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [Validators.required]);
  passwordConfirm = new FormControl("", [Validators.required, this.validatePasswordConfirmation]);

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "passwordConfirm": this.passwordConfirm
    });
  }

  validatePasswordConfirmation(fc: FormControl) {
    var pw2 = fc.value;
    var pw = // how do I get this value properly????

    if (pw === '') {
      return {err:"Password is blank"};
    }

    if (pw2 === '') {
      return {err:"Confirmation password is blank"};
    }

    if (pw …

我有通过表单构建器构建的组件,现在在该表单中我需要包含一个只有一个输入框作为表单控件的组件.

add.ts

this.newForm = this.fb.group({
      name: ['', [Validators.required]],
      surname:['', [Validators.required]],
      time: ''
    });

"时间"必须作为一个不同的组成部分.

add.html

<div class="form-group">
            <label class="col-md-3 control-label" for="name">{{'forms.newForm.label.configuration.name' | translate}}</label>  
            <div class="col-md-3">
              <input type="text" formControlName="name" placeholder="placeholder" 
                  class="form-control input-md" type="text">
              <small *ngIf="!newForm.controls.name.valid && newForm.controls.name.dirty" class="text-danger">
                Name is required.
              </small>
            </div>

            <label class="col-md-3 control-label" for="surname">{{'forms.newForm.label.configuration.name' | translate}}</label>  
            <div class="col-md-3">
              <input type="text" formControlName="surname" placeholder="placeholder" 
                  class="form-control input-md" type="text">
              <small *ngIf="!newForm.controls.surname.valid && newForm.controls.name.dirty" class="text-danger">
                Surname is required.
              </small>
            </div>
          </div>

为time.html

<div>
  <div class="col-md-7">
    <input class="form-control input-md" type="text" (keydown)="eventHandler($event)" maxlength="11">
    <small *ngIf="!validTime" …

假设我正在编写一个自定义属性指令,用于Angular2表单元素.我希望能够像我这样使用我的属性:

<form [formGroup]="myFormGroup">
  <input type="text" [myHighlight] formControlName="name" />
</form>

在我的指令里面,我有这样的事情:

@Directive({selector: '[myHighlight]'})
export class MyHighlightDirective {
  constructor (private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
};

但现在让我们说我想对输入控件的所有更改做些什么.也许我想在每次改变时随机化颜色.

当用户在输入框中键入时HostListener('onChange'),Angular2指南中的事件将起作用.但是对于setValue在窗体控件上调用的事件,它不会被激活,即使emitEvent设置为true也是如此.Form上的Angular文档说这setValue将导致valueChanges在窗体控件对象上发出事件.但是我不想每次使用它时都要将它传递给指令,因为那很笨重.

有没有其他方法可以让指令获得对原始表单控件的访问权限,因为它只有元素引用？

我不知道这是一个问题还是正常行为.

如果我们有这样的表格:

<form #form="ngForm" >
  <div>
     <label>field1</label>
     <input type="text" name="field1" [(ngModel)]="mainVar" [disabled]="someVar"  />                                                                                                                    
  </div>
  <div>
     <label>field2</label>
     <input type="text" name="field2" [(ngModel)]="someVar" />
  </div>
</form>

同时变量mainVar和someVar在组件中设置为空字符串:

mainVar = '';
someVar = '';

这将导致名称field1被禁用的输入,即使someVar为空字符串.据我所知,变量是空字符串,应该返回false到if语句.

但最奇怪的是,如果我从输入field1中删除[(ngModel)]属性,它将按预期工作(如果我在输入field2中键入内容,则输入field1将被禁用)

Plunker的例子

我有以下问题:在我的应用程序中我有一个巨大的形式与嵌套的formbuilder,它工作得很好,但是当用户提交表单时,我想将完整的表单标记为Touched(运行验证),代码是

constructor(private fb: FormBuilder) {
    this.form= fb.group({
        field1: [null],
        field2: [null],
        nestedForm1: fb.group({
            field3: [null, Validators.required],
            field4: [null]
        }),
        nestedForm2: fb.group({
            field5: [null, Validators.required],
            field6: [null, Validators.required]
        })
    });
}

当我跑:

this.form.markAsTouched();

只有Field1和Field2被标记,有没有办法让我不知道这样做？

我正在尝试使用Reactive Forms Module在Angular 2中构建一个表单,并且我正在尝试以选择另一个字段所需的形式设置某些字段的验证.
我做错了什么吗？

ngOnInit() {
    this.martialForm = this.fb.group({
        'maritalStatus': [this.model.maritalStatus, [Validators.required]],
        'spouseTitle': [this.spouseModel.title, null]
    },{
         validator: this.validateIsSpouse
    })
}

validateIsSpouse(group: FormGroup) {
    if(this.model.maritalStatus == "01"){
        group.controls['spouseTitle'].setErrors({ isRequired: true });
    }

    return null;
}

我想在失去焦点后将输入文本的值格式化为货币.我如何在angular4中实现这一目标？

<input type="text" name="txtamount" [(ngModel)]="amount" />

任何建议将不胜感激.谢谢!