Angular2，在我的ts中，我有一个控制组，如何使用ngFormControl在html中进行选择的双向绑定？
form.component.ts
this._reportGeneratingForm = fb.group({
......
selectedGroup: ['']
})
form.component.html
<select class="form-control" ????>
<option>Day</option>
<option>Hour</option>
<option>week</option>
<option>Month</option>
</select>
我有简单的角度2形式代码如下
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formcss">
Username<br>
<input type="text" formControlName="username"><br><br>
<div>
Email<br>
<input id="email" type="text" formControlName="email">
<div *ngIf="myForm.find('email').valid">Invalid Email</div><br><br>
Password<br>
</div>
<input type="text" formControlName="password"><br><br>
<h3>Hobbies</h3>
<input type="text"><br><br>
<button>Add Hobby</button>
<button type="submit" [ngStyle]="{ background:'green'}" [disabled]="!myForm.valid">Submit</button>
</form>
我试图显示消息"无效的电子邮件"是电子邮件提交不通过验证器,但得到此错误
error_handler.js:45 EXCEPTION: self.context.myForm.find is not a function
我正在使用角度2的最终版本.任何想法？
我有一台旧式后端服务器，该服务器将表单数据作为请求参数进行处理。我们将angular2放在前端。我想提交angular2表单，以便所有字段都作为请求参数，这样就不必更改旧版后端。为此，我有：
<form ngNoForm action="http://localhost/config/api/v1/angular/submit" target="_blank" method="POST">
但我也想在Submit按钮上使用angular2表单验证：
<form #f="ngForm" ngNoForm action="http://localhost/config/api/v1/angular/submit" target="_blank" method="POST">
<button type="submit" [disabled]="!f.form.valid" class="small round">Submit</button>
但是，这不起作用-声明ngNoForm时，angular2抱怨有＃f =“ ngForm”。
有什么方法可以像往常一样进行angular2表单验证，还可以将表单作为常规请求参数提交吗？
我试过几次迭代formArray,
这是这个案例的plunker链接https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview
我想要像这样的插件https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview
这是我的情景
[
{
"id": 1,
"legend": "businessModule",
"group": [
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "create Business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
},
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "edit business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
}
]
},
{
"id": 2,
"legend": "PanicModule",
"group": …angular2-forms angular2-template angular2-formbuilder angular
我将我的角度2更新到版本4.0.3然后ng busy stoped working我得到了这个例外:
错误错误:找到合成属性@fadeInOut.请在您的应用程序中包含"BrowserAnimationsModule"或"NoopAnimationsModule".
我的ts组件代码:
import {Component, OnInit, OnDestroy, ViewChild, ElementRef} from '@angular/core';
import {NgForm} from '@angular/forms';
import {AdminService} from "../../../services/admin.service";
import {HttpService} from "../../../../http.service";
import {Subscription} from "rxjs";
import {Http, Response, Headers,RequestOptions} from "@angular/http";
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-products-form',
templateUrl: './products-form.component.html',
styleUrls: ['./products-form.component.css']
})
export class ProductsFormComponent implements OnInit, OnDestroy {
product:any = {'needTransformer':'Yes', 'power':'', 'cct':'', 'cri':'', 'lightSource':'', 'country':'','category':{}, 'productionCompany':{},'finish':{}};
companies: string[] =[];
companiesSubscription: Subscription;
finishes: string[] = [];
finishesSubscription: Subscription;
categories: string[] = [];
categoriesSubscription: …在Angular2 4.0中我FormGroup看起来像这样:
this.form = this._fb.group({
a: ['', [Validators.required]],
b: ['', [Validators.required]],
c: ['', [Validators.required]],
});
是否可以订阅valueChanged单个字段？
我不想检测输入的变化c,因此以下方法不起作用:
this.form.valueChanges.debounceTime(400).subscribe(data => {
// Do something
});
我有这个表单组:
this.form = fb.group({
'teacher': [''],
'schools': fb.array([
fb.group({
'school_name': [''],
'school_description': [''],
})
})
});
问题是:
如何通过函数school_city以FormArray编程方式将新表单控件(命名)添加到特定*组？
我主要担心的是$event这行显示错误:
starClick($event) {
参数$ event隐式具有'any'类型
我也想知道 - 根据Angular2文档,什么$event是捕获事件对象,所以让我问一个愚蠢的问题 - 为什么我们不调用它$object？因为它让我感到困惑,直到我终于意识到这里发生了什么......
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'stars',
template: `
<span class="glyphicon glyphicon-star-empty" (click)= "starClick($event)"></span>
`
})
export class StarsComponent {
starClick($event) {
if($event.target.className == "glyphicon glyphicon-star-empty") {
$event.target.className = "glyphicon glyphicon-star";
}
else{
$event.target.className = "glyphicon glyphicon-star-empty";
}
}
}
每当表单发生更改时，我都想取消选中一个复选框。该复选框是该表单的一部分，因此我只想取消选中该复选框以外的其他任何控件来更改值时。
我正在订阅这样的FormGroup的值更改
import { FormBuilder, FormGroup } from '@angular/forms';
export class App {
form : FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = formBuilder.group({
firstName: 'Thomas',
lastName: 'Mann',
... many more fields ...
checkbox: true
})
this.form.valueChanges.subscribe(data => {
//if valueChange was not triggered by change in the checkbox
this.form.get('checkbox').setValue(false);
})
}
}
我可以分别在每个其他控件中订阅valueChanges，但要避免这样做
我建立一个组件(html,css,spec.ts,ts在角)中,我总是希望endDate > startDate.我已经按照这个链接https://material.angular.io/components/datepicker/overview来制作多个日期选择器.
这是html我用于startDate和endDate的.
开始日期:
<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
结束日期:
<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
validateForm()我用过的代码ts是:
validateForm() {
this.unavailabilityForm = this.formBuilder.group({
'startDate': [''],
'endDate': ['']
}); …validation datepicker angular-material angular2-forms angular2-formbuilder