标签: angular2-forms

我想创建一个可以与FormBuilder API一起使用的自定义输入组件.如何formControlName在组件内添加？

模板:

<label class="custom-input__label"
          *ngIf="label">
        {{ label }}
</label>
<input class="custom-input__input" 
       placeholder="{{ placeholder }}"
       name="title" />
<span class="custom-input__message" 
      *ngIf="message">
        {{ message }}
</span>

零件:

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

@Component({
    moduleId: module.id,
    selector: 'custom-input',
    host: {
        '[class.custom-input]': 'true'
    },
    templateUrl: 'input.component.html',
    styleUrls: ['input.component.css'],
    encapsulation: ViewEncapsulation.None,
})
export class InputComponent {
    @Input() label: string;
    @Input() message: string;
    @Input() placeholder: string;
}

用法:

<custom-input label="Title" 
           formControlName="title" // Pass this to input inside the component>
</custom-input>

我在Angular 4中尝试嵌套的反应形式.它工作正常但是当我尝试构建AOT时它会抛出错误

'AbstractControl'类型上不存在'controls'

我用Google搜索并尝试了一些事情,但没有运气.谁能告诉我如何解决这个问题？

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

下面的打字稿代码

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());
}
removeAddress(i: number) {
    const control = …

我有一个简单的布尔属性valid在我的对象document ,需要将其绑定到无线输入.

这是我到目前为止:

<input type="radio" name="valid" id="validTrue" (click)="document.valid = true" [checked]="document.valid"/>
<input type="radio" name="valid" id="validFalse" (click)="document.valid = false" [checked]="!document.valid"/>

至少在点击时设置属性,但无线电输入不显示其状态.在我的浏览器的开发者控制台中查看我发现ng-reflect-checked已设置属性但它似乎不会对html radio-input产生影响.

我究竟做错了什么？
有没有人有一个工作"angular2-boolean-radio-input"片段？

所以我试图制作一个可以操作FormControl的指令.

似乎如果我使用长语法来在模板中声明表单控件,我可以将控件传递给指令,以便将它作为直接@Input()绑定; 即:使用以下模板:

<form [formGroup]="myForm">
    <input type="text" id="myText" [formControl]="myForm.controls['myText']" my-directive>
</form>

以下组件逻辑:

@Component({
    // Properties go here.
})
class MyComponent {
    myForm: FormGroup;

    constructor(fb: FormBuilder) {
        // Constructor logic...
    }

    ngOnInit() {
        this.myForm = this.fb.group({
            "myText": [""]
        });
    }
}

该指令看起来像:

@Directive({
    selector: "[my-directive]"
})
class MyDirective {
    Input() formControl: FormControl;
}

但是,如果我在模板中使用formControlName语法:

<form [formGroup]="myForm">
    <input type="text" id="myText" formControlName="myText" my-directive>
</form>

我如何在指令中引用(隐式？)make FormControl？

我使用angular中的复选框来选择多个数据并且我试图在表单上获取复选框的值.相反,获取值im得到的值为true.我试过以下代码帮我提前谢谢

   export class CreatesessionComponent implements OnInit {    
      form : FormGroup ;
      constructor(private formBuilder: FormBuilder) {       
      }        
      ngOnInit() {
       this.form = this.formBuilder.group({     
          useremail :  new FormArray([
            new FormControl('',Validators.required)
          ])    
      });
    }
  }

userdata是动态数组,我将从数据库中获取

<div class = "row" formArrayName="useremail; let k = index">
   <div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
       <div *ngFor="let data of userdata">
           <div class="col-md-6">
               <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
           </div>
       </div>
   </div>
</div> 

我正在使用Angular 4.0.2构建一个应用程序.如何向表单添加按钮以添加新行输入和删除特定行的删除按钮？我的意思是我想要一个像这样的表格.我希望我的表单看起来像这样:

.

这是我的代码:

附加invoice.component.html

    <h3 class="page-header">Add Invoice</h3>
    <form [formGroup]="invoiceForm">
      <div formArrayName="itemRows">
        <div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i">
          <h4>Invoice Row #{{ i + 1 }}</h4>
          <div class="form-group">
            <label>Item Name</label>
            <input formControlName="itemname" class="form-control">
          </div>
          <div class="form-group">
            <label>Quantity</label>
            <input formControlName="itemqty" class="form-control">
          </div>
          <div class="form-group">
             <label>Unit Cost</label>
             <input formControlName="itemrate" class="form-control">
          </div>
          <div class="form-group">
            <label>Tax</label>
            <input formControlName="itemtax" class="form-control">
          </div>
          <div class="form-group">
            <label>Amount</label>
            <input formControlName="amount" class="form-control">
          </div>
          <button *ngIf="i > 1" (click)="deleteRow(i)" class="btn btn-danger">Delete Button</button>
        </div>
      </div>
      <button type="button" (click)="addNewRow()" class="btn btn-primary">Add new …

如何在角度2反应形式中为所有表单字段设置默认值？

这是重现问题的plnkr

下面的代码不会更新下拉列值,因为它有一个与之关联的对象.

注意:这里我需要使用从Backend API收到的响应为所有表单字段设置默认值.

Component.html

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
        <label>Country:</label>
        <select formControlName="country">
          <option *ngFor="let country of masterCountries" [ngValue]="country">{{country.countryName}}</option>
        </select>
    </div>

    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div> …

我已经准备好了使用angular2/forms提供的ReactiveForms.此表单有一个表单数组产品:

this.checkoutFormGroup = this.fb.group({
            selectedNominee: ['', Validators.required],
            selectedBank: ['', Validators.required],
            products: productFormGroupArray
        });

productFormGroupArray是一个FormGroup Objects数组.我使用以下方法获取控件,即FormArray对象:

this.checkoutFormGroup.get('products')

我试图在索引的product数组中获取元素i.如何在不循环数组的情况下完成这项工作？

编辑:

我尝试使用at(index)方法:

this.checkoutFormGroup.get('products').at(index)

但这会产生一个错误:

Property 'at' does not exist on type 'AbstractControl'.

编辑2: 从服务器收到checkoutData和fund.

this.checkoutData.products.forEach(product => {
                    this.fundFormGroupArray.push(this.fb.group({
                        investmentAmount: [this.fund.minInvestment, Validators.required],
                        selectedSubOption: ['', Validators.required],
                    }))
            });

出于一些奇怪的原因,在线没有任何教程或代码示例显示如何使用Angular2 Reactive表单,而不仅仅是简单的输入或选择下拉列表.

我需要创建一个表单让用户选择他们的头像.(图像文件)

以下不起作用.(即"头像"属性从不显示任何值更改.)

profile.component.html:

               <form [formGroup]="profileForm" novalidate>
                 
                        <div class="row">
                            <div class="col-md-4 ">
                                <img src="{{imgUrl}}uploads/avatars/{{getUserAvatar}}" style="width:150px; height:150px;float:left;border-radius:50%;margin-right:25px;margin-left:10px;">

                                <div class="form-group">
                                    <label>Update Profile Image</label>
                                    <input class="form-control" type="file" formControlName="avatar">
                                </div>
                            </div>
                            <div class="col-md-8 ">
                                <div class="form-group">
                                    <label >Firstname:
                                        <input class="form-control" formControlName="firstname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Lastname:
                                        <input class="form-control" formControlName="lastname">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Email:
                                        <input class="form-control" formControlName="email">
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label >Password:
                                        <input class="form-control" type="password" formControlName="password">
                                    </label>
                                </div>
                            </div>
                        </div>
                 
                </form>
                <p>Form value: {{ profileForm.value | json }}</p>
                <p>Form status: …

我有一个Angular 2应用程序,它使用该ReactiveForms模块来管理使用自定义验证器的表单.验证器接收一个FormControl对象.我有一些输入字段可以使用相同的自定义验证器,只要我知道FormControl传递给验证器时字段的名称.

我找不到任何FormControl公开输入字段名称的方法或公共属性.当然,它很容易看到它的价值.以下显示了我想如何使用它:

public asyncValidator(control: FormControl): {[key: string]: any} {
  var theFieldName = control.someMethodOfGettingTheName(); // this is the missing piece

  return new Promise(resolve => {
      this.myService.getValidation(theFieldName, control.value)
        .subscribe(
          data => {
            console.log('Validation success:', data);
            resolve(null);
          },
          err => {
            console.log('Validation failure:', err);
            resolve(err._body);
          });
    });
  }