我在使用控件和选择框构建动态angular2表单时遇到问题,例如这个plunker:
<select class="form-control" ngControl="power">
<option *ngFor="#p of powers" [value]="p">{{p}}</option>
</select>
您可以选择英雄力量,控件将具有相同的值.但是如果按Change Powers,则所选值将为null,但控制值仍为旧值.这是一个严重的问题,我认为这是一个很多错误的来源,当表单显示一件事,但实际上它会提交一些不同的东西,有没有办法更新控件的内容？有updateValue(),但是你必须手动设置在所有这些情况下的价值.
在表单构建之后更新selectbox选项时也会出现类似的情况,它会在selectedbox中显示一个选定的值,而控件值将为null,有关如何处理此问题的任何想法？
我知道提供者是从另一个类获得服务但是什么是多提供者和令牌的东西？
还有什么时候multi=true呢？
provide(NG_VALIDATORS, { useExisting: class), multi: true })
angular2-forms angular2-directives angular2-services angular
在我的一个页面上,我使用a FormBuilder来填充初始化时的表单.只要输入不为空,每个输入都会获得一个类.这是通过ngClass在每个输入中添加一个并订阅的FormGroup来完成的valueChanges.
只要以编程方式填充表单,就会出现问题.每当用户更改表单上的任何值时,valueChanges都会被调用,但是,使用a时不是这种情况FormBuilder.
我的问题是:如何valueChanges在FormBuilder完成时触发事件.
我尝试过使用this.FormGroup.updateValueAndValidity(),但这没有任何结果.
让我们说
surname = new FormControl('', [Validators.required, Validators.minLength(2)]);
在某些时候,根据情况,我可以添加或删除姓氏控制上的任何验证器.
最后我怎么知道姓氏控制中存在哪些验证器？我在文档中找不到任何东西,也没有将控件转储到控制台中
就像是
surname.getValidators() should return - ['required', 'minLength']
两者有什么区别:
<form #form="ngForm">
和
<form [ngFormModel]="form">
你什么时候用另一个？
我尝试创建一个动态表单(所以你可以无限制地添加项目到列表),但不知何故我的列表的内容没有得到发送,因为它找不到路径控件:
无法通过路径找到控件:'list_items - > list_item'
我的组件:
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
listForm: FormGroup;
constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
private listService: ListService) {
this.listForm = this.fb.group({
title: ['', [Validators.required, Validators.minLength(5)]],
list_items: this.fb.array([
this.initListItem(),
])
});
}
initListItem() {
return this.fb.group({
list_item: ['']
});
}
initListItemType() {
return this.fb.group({
list_item_type: ['']
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.push(this.initListItem());
}
模板(list.component.html):
<h2>Add List </h2>
<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)"> …我在申请表上有一份登记表.但在此注册表格中,有一个可选的"密码"和"重复密码"输入.因为我宁可不使用FormControl对象来检索这些2个值(其他值都很好),我想为使用的一种解决方法ngModel中的<form>
TS:
public password: string = '';
public passwordRe: string = '';
public registrationForm;
constructor(public fb: Formbuilder) {
this.registrationForm = this.fb.group({
'firstname' : [null, Validators.required],
'lastname': [null, Validators.required]
});
}
HTML
<form [formGroup]="registrationForm" (ngSubmit)="doSomething()">
<div class="form-group"
[ngClass]="{'has-error':!registrationForm.controls['firstname'].valid
&& registrationForm.controls['firstname'].touched}">
<label>Firstname: *</label>
<input class="form-control" type="text" placeholder="Firstname" [formControl]="registrationForm.controls['firstname']"/>
</div>
<div class="form-group"
[ngClass]="{'has-error':!registrationForm.controls['lastname'].valid
&& registrationForm.controls['lastname'].touched}">
<label>Lastname: *</label>
<input class="form-control" type="text" placeholder="Lastname" [formControl]="registrationForm.controls['lastname']"/>
</div>
<!-- NG MODELS -->
<input type="password" [(ngModel)] = "password"/>
<input type="password" [(ngModel)] = "passwordRe" …我有一个登录表单,其中包含电子邮件和密码字段.
我选择了浏览器自动填充功能.
问题是:当浏览器自动填充登录表单时,这两个字段都是原始且未触及的,因此禁用了提交按钮.
如果我单击禁用按钮,它会启用并触发提交操作,这很好.但是默认的禁用方面非常糟糕,可能会让一些用户感到失望.
你有一些关于如何处理的想法吗？
是否不可能在ng-content中包含表单输入元素并将其"连接"到父组件的ngForm实例？
将此基本模板用于父组件:
<form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>
<ng-content></ng-content>
<button type="submit">Submit</button>
</form>
然后在子组件里面放入"ng-content",如下所示:
<input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" name="firstName" required minlength="2">
在提交父表单时,子控件不可用,这也意味着子组件中的任何内容的脏/验证不会反映在父表单上.
这里缺少什么？
我有以下模板.我正试图掌握反应形式,但我遇到了问题.
<form [formGroup]="guestForm" novalidate>
<div class="panel-body">
<form>
<div class="col-md-12 col-sm-12">
<div class="form-group col-md-3 col-sm-6">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
</div>
</form>
</div>
</form>
然后在我的组件中我有:
@Component({
selector: 'guest-input',
templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
@Input()
guest: Guest;
guestForm: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.guestForm = this._fb.group({
firstname: ['test', [Validators.required, Validators.minLength(3)]]
});
}
这一切对我来说都很好,但由于某种原因,我得到:
错误:未捕获(在承诺中):错误:formControlName必须与父formGroup指令一起使用.您将要添加formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个).
我以为我已经在我的身上宣布了这一点<form>.