我有一个自定义输入组件,正在更新验证和状态,触摸/未触摸除外.其他所有状态(原始/肮脏)都按预期工作.
这是一个吸烟者:https://plnkr.co/edit/O9KWzwhjvySnXd7vyo71
import { Component, OnInit, Input, ElementRef, forwardRef, Renderer } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES, Validator, Validators, NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
};
const noop = () => {};
@Component({
selector: 'my-custom-input',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
template: `
<div class="form-group">
<label>CUSTOM INPUT</label>
<input type="text" class="form-control" [(ngModel)]="value" required>
<p *ngIf="control.errors.required && control.touched">Field is required</p>
<strong>Has input been touched: {{control.touched ? 'Yes' : 'No'}}</strong><br>
<strong>Is input untouched: …我正在测试的方法如下:
/**
* Update properties when the applicant changes the payment term value.
* @return {Mixed} - Either an Array where the first index is a boolean indicating
* that selectedPaymentTerm was set, and the second index indicates whether
* displayProductValues was called. Or a plain boolean indicating that there was an
* error.
*/
onPaymentTermChange() {
this.paymentTerm.valueChanges.subscribe(
(value) => {
this.selectedPaymentTerm = value;
let returnValue = [];
returnValue.push(true);
if (this.paymentFrequencyAndRebate) {
returnValue.push(true);
this.displayProductValues();
} else {
returnValue.push(false);
}
return …unit-testing jasmine angular2-forms angular2-testing angular
我正在研究一个小的可重用组件,它可以设置单选按钮的样式并发出所选的值.
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
@Component({
moduleId: module.id,
selector: 'button-select',
template: `<div class="toggle-group">
<div *ngFor="let choice of choices">
<input type="radio"
id="{{ groupName + choice }}"
name="{{groupName}}"
value="{{ choice }}"
[checked]="choice === defaultChoice"
[(ngModel)]="value"
(ngModelChange)="choose($event)" />
<label class="toggle-button"
for="{{ groupName + choice }}">{{ choice }}</label>
</div>
</div>`,
styleUrls: [
'editableField.css',
'buttonSelect.css'
]
})
export class ButtonSelectComponent implements OnInit {
@Input() choices: string[];
@Input() defaultChoice: string;
@Input() groupName: string;
@Input() value: string;
@Output() valueChosen: EventEmitter<any> = …我需要使用反应式表格angular2来检查密码和确认密码字段是否具有相同的值.我确实在这里看到了很多答案,Angular 2表格验证了重复密码,比较验证器中的字段和angular2,但似乎没有人对我有用.有人请帮忙."这个"在我的验证函数中是未定义的: (.分享我的代码,
this.addEditUserForm = this.builder.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
title: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required],
confirmPass: ['', [Validators.required, this.validatePasswordConfirmation]]
});
validatePasswordConfirmation(group: FormGroup): any{
let valid = true;
// if (this.addEditUserForm.controls.password != this.addEditUserForm.controls.confirmPass) {
// valid = false;
// this.addEditUserForm.controls.confirmPass.setErrors({validatePasswordConfirmation: true});
// }
return valid;
}
在角度2中,模板驱动形式和反应形式之间的区别是什么.在哪些情况下,我们需要使用模板驱动的表单和反应形式
我正在尝试使用角度2创建表单构建器.一个非常基本的示例如下:
this.fields = [{name: 'Name', type: 'text'}, {name: 'Age', type: 'number'}];
但我也想支持自定义元素,如:
this.fields = [
{name: 'Name', type: text},
{name: 'Age', type: 'custom', customid: 'Ctl1'},
{name: 'Whatever', type: 'custom', customid: 'Ctl2'}
];
// template:
<super-form [fields]="fields">
<Ctl1><input type="number" ...><Ctl1>
<Ctl2><whaterver-control ...><Ctl2>
</super-form>
在我的表单构建器组件中,我有类似的东西:
<div *ngFor="let f of fields">
<div [ngSwitch]="f.type">
<span *ngSwitchWhen="'custom'">
<ng-content select="f.customid"></ng-content>
</span>
</div>
</div>
但鉴于我在这里,这显然不起作用.这是ng2限制吗？如果是这样,我想我可以硬代码说出5个可选的内容元素并检查它们是否被指定而没有动态选择,但这是一个黑客.
干杯
在Angular2 中进行解析器和格式化的方法是什么？
在Angular1中,可以使用ngModelController进行这样的操作:
//model -> view
ngModelController.$formatters.push(function(modelValue) {
return modelValue.toUpperCase();
});
//view -> model
ngModelController.$parsers.push(function(viewValue) {
return viewValue.toLowerCase();
});
你能给我一个如何用Angular2做的例子吗？
UPD:管道类似于Angular1中的过滤器,但我不是寻找过滤器,而是针对ngModel的分析器和格式化器.所以"管道"不是正确的答案.
我有一个奇怪的要求,并希望得到一些帮助.
单击按钮(不提交)后,我需要关注表单的第一个找到的无效输入.表单相当大,因此屏幕需要滚动到第一个无效输入.
这个AngularJS答案将是我需要的,但不知道这样的指令是否是Angular 2的方法:
Angular 2的方法是什么？感谢您的帮助!
任何想法为什么在运行以下代码时我得到控制valueChanges事件被'firstName'触发？
let form: FormGroup = this.createForm();
form.controls['firstName'].enable();
form.controls['firstName'].valueChanges(value=>{
//some code
});
由于没有任何价值变化(只是状态),我不希望valueChanges在这里触发,只有statusChanged.
我错过了什么吗？
我想在form.component.ts上检测change事件的值.我不想调用函数ex:(onChange)="function($ event.target.value)"
public form: FormGroup;
constructor(private formBuilder: FormBuilder){
}
private loadForm(){
this.form = this.formBuilder.group({
tipo: [null, Validators.required],
nomeRazao: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
apelidoFantasia: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
cpfCnpj: [null, Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(14)])],
rgIe: [null],
contato: this.formBuilder.group({
email: [null],
telefone: [null]
}),
endereco: this.formBuilder.group({
cep: [null, Validators.pattern('^([0-9]){5}([-])([0-9]){4}$')],
uf: [null],
cidade: [null],
bairro: [null, Validators.required],
logradouro: [null],
complemento: [null],
numero: [null, Validators.pattern('/^\d+$/')]
})
});
}
ngOnInit() {
this.loadForm();
}