我有点困惑,因为一些教程使用#来获取输入,而有些使用[(ngModel)]
在Angular 2表单中,尝试通过ngSubmit获取数据.我可以在我的表单组件中同时分配ngModel和ngControl属性而没有问题,但是在子组件MyInput中,我无法在没有"无提供程序错误"的情况下分配ngControl.Plunker在这里http://plnkr.co/edit/LauhEz6vMaEmIg0hceoj?p=preview
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, MyInput],
template: ` <div>
<form #hf="ngForm" (ngSubmit)="onSubmit(hf.value)">
<div>
In Form: <input type='text' [ngControl]="inform" [(ngModel)]="theValue" [required]="req" #spy >
<br>Classes: {{spy.className}}
<br>
<br>In Component: <my-input [props]='prop'></my-input>
<br>In Component: <my-input [props]='prop2'></my-input>
</div>
<button type="submit" [hidden] = "!editing">Save</button>
<button type="button" (click)="cancelClick()" [hidden] = "!editing">Cancel</button>
<button type="button" (click)="setEdit(true)" [hidden] = "editing">Edit</button>
</form>
Form Values {{data}}
</div>
`
子组件模板:
@Component({
selector: 'my-input',
directives: [FORM_DIRECTIVES],
template: `
<input type='text'
[(ngModel)]="props.Value"
如果我添加此错误
[ngControl]="props.id"
我需要从表单传递给Sub Component吗？
我很难在表单中使用*ngIf和ngFormModel来验证表单.
用例是这样的:根据用户输入,隐藏或停用表单中的某些特定字段.但是如果显示这些输入,则必须对它们进行验证.
当只需要基本验证时,我可以这样或那样做:
ngControl和使用A-OKrequiredpattern属性.它不是Angular,但它有效.但是为了实现更复杂的验证,我一直在尝试使用ngControl耦合ngFormModel来使用自定义检查.我使用了以下页面中的代码片段:
如何在angular2中添加表单验证模式(以及那里引用的链接)
Angular2表单:Validations,ngControl,ngModel等
我的代码如下:
HTML
<div>
<h1>Rundown of the problem</h1>
<form (ngSubmit)="submitForm()" #formState="ngForm" [ngFormModel]="myForm">
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="model.hideField" ngControl="hideField"> Is the input below useless for you ?
</label>
</div>
<div *ngIf="!model.hideField">
<div class="form-group">
<label for="optionalField">Potentially irrelevant field </label>
<input type="text" class="form-control" [(ngModel)]="model.optionalField" ngControl="optionalField" required #optionalField="ngForm">
<div [hidden]="optionalField.valid || optionalField.pristine" class="alert alert-warning">
This input must go through myCustomValidator(), so behave.
</div>
</div>
</div>
<button …使用formControlName内部括号和没有括号之间有什么区别？在动态表单中,教程formcontrolname在括号内使用
[formControlName]="dyncontrol.key"
但是在其他教程中我没有看到它
formControlName="name"
Angular 2的文档讲述了表单验证.但仅适用于输入字段类型文本.我的问题是收音机按钮.
这是HTML:
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button type='button' [disabled]="??">Next<button>
如果用户未选择任何值,如何将disabled属性设置为true.
我正在使用ReactiveFormsModule并定义了我的所有表单控件,包括简单的验证器,例如Validators.requiredconst配置.
我想为其中一个FormControls添加一个自定义验证器.
我目前已将自定义验证器添加为此配置中的函数,并且它工作正常,但它不属于此处,它确实需要存在于我的组件中,但我不确定如何才能附加自定义验证器FormBuilder配置完所有控件后手动完成.
请参阅下面的代码注释,如下所示
我如何附在这里
*???*
this.form.get('site_id').添加自定义值
这是我目前的配置代码.
import {FormControl, Validators, FormBuilder} from '@angular/forms';
var fb = new FormBuilder();
function exampleValidator(control: FormControl): { [s: string]: boolean} {
if (control.value === 'Example'){
return { example: true };
}
return null;
}
export const formConfig = fb.group({
'extract_batch_id': ['bbbbbbbbbbbbb',
[
Validators.required
]],
'site_id': ['blah',
[
Validators.required,
exampleValidator
]]
});
我有一个指令,真的应该存储自定义验证器
职位搜索组件
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
import {ActivatedRoute} from '@angular/router';
import …有人可以告诉我比较ngModel旧值和新值的最佳做法是什么？
角度1:
$scope.$watch('someProperty', funciton(oldVal, newVal){
// code goes here
})
我问这个,因为(ngModelChange)从来没有带给我oldVal,只有newVal.
在我的例子中,我在<select>标签中使用ngModel 并将旧选择与新选择进行比较:
<select [(ngModel)]="current" (ngModelChange)="onModelChange($event)">
<option *ngFor="let item of myArray" [ngValue]="item">{{item.name}} </option>
</select>
在角度为2的ngModel中遇到问题.有一项任务是从组件类中的数组输出几个输入.发现了一种可能使ngModel从[name]属性中获取其值而不包含[()]中的ngModel.我想知道是否有办法为这些输入提供默认值.
personal-details.component.ts:
import {
Component,
} from '@angular/core';
import { Input }from './Input'
@Component({
selector: 'personal-details',
styleUrls: ['personal-details.component.sass'],
templateUrl: 'personal-details.component.html'
})
export class PersonalDetailsComponent {
title: string;
inputs: Input[] = [
new Input('Name', 'text', 'Name', true, true),
new Input('Surname', 'text', 'Surname', true, true),
new Input('Mobile phone Number', 'text', 'phone', true, true),
new Input('Date of Birth', 'text', 'birthday', false, true),
new Input('Title', 'text', 'title', false, false),
new Input('Title after name', 'text', 'title-after-name', false, false),
new Input('Personal number', 'text', 'personal-number', false, false), …我正在尝试添加验证,以便结束日期不能在开始日期之前.不幸的是我不知道该怎么做,到目前为止我在互联网上找不到任何有用的建议.我的表单看起来像这样:
editAndUpdateForm(tageler: Tageler) {
this.tageler = tageler;
this.tagelerForm = this.fb.group({
title: [this.tageler.title, Validators.required],
text: this.tageler.text,
group: [[this.tageler.group], Validators.required],
date_start: new Date(this.tageler.start).toISOString().slice(0, 10),
date_end: new Date(this.tageler.end).toISOString().slice(0, 10),
...
});
this.tagelerForm.valueChanges
.subscribe(data => this.onValueChanged(data));
}
到目前为止我的验证:
onValueChanged(data?: any) {
if (!this.tagelerForm) {
return;
}
const form = this.tagelerForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key …我未能让 Angular 2 反应式表单工作，其中FormGroup 嵌套在FormArray 中。有人可以告诉我我的设置有什么问题吗？
为简洁起见，省略了代码中不相关的部分。
以下是我的组件
orderForm: FormGroup = this.fb.group({
id: [''],
store: ['', Validators.required],
//The part related to the error
order_lines: this.fb.array([
this.fb.group({
id: [''],
order_id: [],
product_id: [],
description: ['', Validators.required],
unit_price: ['', Validators.required],
discount: [0],
units: [1, Validators.required],
line_total: ['', Validators.required]
})
])
});
constructor(private fb: FormBuilder) { }
//Order instance is passed from elsewhere in the code
select(order: Order): void {
this.orderForm.reset(order)
}
Order传递给select方法的实例是这样的：
{
"id": 20,
"store": "Some Store", …