标签: angular2-forms

使用Angular 2,双向绑定在模板驱动的表单中很容易 - 您只需使用香蕉盒语法.您将如何以模型驱动的形式复制此行为？

例如,这是标准的反应形式.让我们假装它看起来比它看起来复杂得多,有很多种不同的输入和业务逻辑,因此比模板驱动的方法更适合模型驱动的方法.

export class ExampleModel {
    public name: string;
    // ... lots of other inputs
}

@Component({
    template: `
        <form [formGroup]="form">
            <input type="text" formControlName="name">
            ... lots of other inputs
        </form>

        <h4>Example values: {{example | json}}</h4>
    `
})
export class ExampleComponent {
    public form: FormGroup;
    public example: ExampleModel = new ExampleModel();

    constructor(private _fb: FormBuilder) {
        this.form = this._fb.group({
            name: [ this.example.name, Validators.required ]
            // lots of other inputs
        });
    }

    this.form.valueChanges.subscribe({
        form => {
            console.info('form values', form);
        } …

我想要一个按钮被禁用,直到使用FormBuilder for Angular检查复选框.我不想明确检查复选框的值,而是希望使用验证器,以便我可以简单地检查form.valid.

在下面的两个验证案例中,复选框都是

interface ValidationResult {
  [key:string]:boolean;
}

export class CheckboxValidator {
  static checked(control:Control) {
    return { "checked": control.value };
  }
}

@Component({
  selector: 'my-form',
  directives: [FORM_DIRECTIVES],
  template: `  <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="checkbox" id="cb" ngControl="cb">
    <button type="submit" [disabled]="!form.valid">
    </form>`
})

export class SomeForm {
  regForm: ControlGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      cb: [ CheckboxValidator.checked ]
      //cb: [ false, Validators.required ] <-- I have also tried this
    });
  }

  onSubmit(value: any) {
    console.log('Submitted: ', this.form);
  } …

尝试设置表单但由于某种原因,尽管使用[(ngModel)],但我的html中的Date输入并未绑定到对象的日期值

HTML:

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

表单组件:

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

用户类:

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

测试输出显示当前"新"Date作为对象的值,但输入不更新User对象的日期值或反映该值,表明这两个双向绑定都不起作用.非常感谢帮助.

我正在制作一个动态的表格.A Field有一个值列表.每个值都由一个字符串表示.

export class Field{
    name: string;
    values: string[] = [];
    fieldType: string;
    constructor(fieldType: string) {this.fieldType = fieldType;}
}

我的组件中有一个函数,它为字段添加了一个新值.

addValue(field){
    field.values.push("");
}

值和按钮在我的HTML中显示如下.

<div id="dropdown-values" *ngFor="let value of field.values; let j=index">
    <input type="text" class="form-control" [(ngModel)]="field.values[j]" [name]="'value' + j + '.' + i"/><br/>
</div>
<div class="text-center">
    <a href="javascript:void(0);" (click)="addValue(field)"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>

只要在输入值中写入一些文本,输入就会失去焦点.如果我向字段添加许多值,并且我在一个值输入中写入一个字符,则输入将失去焦点,并且字符将写入每个输入.

我想创建一个用户将输入邮件的表单.我想验证客户端的邮件格式.Angular2中是否有任何通用邮件验证程序？

注意:类似于angularjs验证器:https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

我有一个看起来像这样的简单形式

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

并且需要提交表格并从外部检查其有效性

例如.以编程方式提交,或者<button type="submit">在<form>标记之外提交.

我必须提交一份表格和图片.我试过这个代码(有多种方式),但对我来说不起作用.有没有人有使用angular2上传文件的工作演示请帮助我.

component.html

    <form class="form-horizontal" role="form" >

        <div class="form-group">
            <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>
            <div class="col-sm-7">
                <div>
                    <input type="text" class="form-control" id="myname"
                    [(ngModel)]="myfile.name">                        
                </div>                  
            </div>                               
        </div>        


        <div class="form-group">
            <label class="control-label col-sm-4" for="myimage">Image</label>
            <div class="col-sm-7">
                <div>
                    <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />                         
                </div>   
            </div>
        </div>


        <div class="form-group">        
        <div class="text-center">
            <button type="button" (click)="upload()">Upload</button>             
        </div>
        </div>
  </form>

component.ts

     myfile={
                "name":"Mubashshir",               
                "image":''
     }

     fileChangeEvent(fileInput: any){
        this.myfile.image = fileInput.target.files;        
     }

     upload(){
          this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile)
            .subscribe(
                data => {
                            console.log("data submitted");                        
                        },
                err => console.log(err),
                () =>{
                     console.log('Authentication Complete'); …

我在Plunkr上有一个Angular 2 RC4基本表单示例,似乎抛出以下错误(在Chrome DEV控制台中)

这是傻瓜

https://plnkr.co/edit/GtPDxw?p=preview

错误:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7
ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

ORIGINAL STACKTRACE:
Error: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

    at new BaseException (https://npmcdn.com/@angular/forms@0.2.0/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter

我有一个包含许多输入的页面,我想让它' readOnly'我找到这个解决方案:如何在Angular2 Typescript中更改HTML元素readonly和required属性？

但是我不想单独为每个输入做这件事.

如何readOnly在某个div中为所有输入添加属性.

我有以下HTML但我得到了例外.怎么解决？

解析器错误:插值({{}})其中表达式位于[!(editForm.controls.field_item_exportExpression _ {{i}} ?. dirty && editForm.controls.field_item_exportExpression _ {{i}}？无效的第48列) ]

<div class="form-group">
  <label class="form-control-label" for="field_exportExpression">exportExpression</label>
  <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item_exportExpression_{{i}}" [(ngModel)]="datatype.items[i].exportExpression" required>
  <div [hidden]="!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)">
   <small class="form-text text-danger" [hidden]="!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                            required. </small>
 </div>
</div>

以下不起作用.说[找到不需要的令牌.

[hidden]="!editForm.controls.['item_exportExpression_' + i]?.errors?.required 

以下不是抱怨[而是抱怨Cannot read property '0' of undefined

 [hidden]="!editForm.controls.item_exportExpression_[ i]?.errors?.required