- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用自定义组件作为输入的表单,它接收一个 ControlName。当我在组件中键入内容时,它不会更新“错误”属性。
app-pf-input-text.ts:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-pf-input-text',
templateUrl: './pf-input-text.component.html',
styleUrls: ['./pf-input-text.component.scss']
})
export class PfInputTextComponent implements OnInit {
@Input() id: string;
@Input() name: string;
@Input() value: string;
@Input() placeholder: string;
//falta trim
@Input() maxlength: string;
@Input() minlength: string;
@Input() disabled: boolean;
@Input() required: boolean;
constructor() { }
ngOnInit() {
}
}
app-pf-input-text.html:
<div class="input-group">
<input
type="text" class="form-control">
</div>
我的表单:
import { Component, OnInit, Input } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Empresa } from '../empresa.model';
@Component({
selector: 'app-empresa-cadastro',
templateUrl: './empresa-cadastro.component.html',
styleUrls: ['./empresa-cadastro.component.css']
})
export class EmpresaCadastroComponent implements OnInit {
empresaForm: FormGroup;
nomeControl: FormControl;
constructor(private fb: FormBuilder) {}
createForm() {
this.nomeControl = new FormControl('', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(10)
]);
}
createFormControl() {
console.log('Criando FormControl');
}
onSubmit() {
const empresa = this.empresaForm.value as Empresa;
console.log('Empresa: ', empresa);
}
limpar() {
this.empresaForm.reset();
}
ngOnInit() {
this.createForm();
}
}
我的表单 html:
<form [formGroup]="empresaForm">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">Nome empresa</label>
<app-pf-input-text controlName="nome"></app-pf-input-text>
{{nomeControl.errors | json}} - {{nomeControl.dirty}}
<div class="form-control-feedback" *ngIf="nomeControl.errors && (nomeControl.dirty || nomeControl.touched)">
<div *ngIf="nomeControl.errors.required" class="has-error">
Campo obrigatorio
</div>
<div *ngIf="nomeControl.errors.maxlength">
Campo ultrapassou o tamanho maximo.
</div>
<div *ngIf="nomeControl.errors.minlength">
Campo não antingiu o tamanho minimo
</div>
</div>
</div>
</div>
</form>
它在“ControlName”中提供了一个初始值,但在我输入时它永远不会更新。
{{nomeControl.errors | json}} - {{nomeControl.dirty}}
返回:
{ “必需”:真 } - 假
当您在输入中输入内容时,这些值不会更新。
最佳答案
您正在混合响应式(Reactive)和模板驱动的形式。你的PfInputTextComponent
有一些问题。使用 Reactive Forms,您不需要 required
, maxLength
, minLength
和 disabled
输入。你确实需要 FormControl
输入。如果您使用的是 Reactive Forms,则可以在组件类中设置值和验证器,而不是在模板中。
this.nomeControl = new FormControl('', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(10)
]);
这足以设置验证和初始值。您现在需要做的就是将此控件绑定(bind)到您的 html <input />
使用 [formControl]
指令。
app-pf-input-text.html
<div class="input-group">
<input [formControl]="ctrl" type="text" class="form-control">
</div>
app-pf-input-text.ts:
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-pf-input-text',
templateUrl: './pf-input-text.component.html',
styleUrls: ['./pf-input-text.component.scss']
})
export class PfInputTextComponent implements OnInit {
@Input() ctrl: FormControl;
@Input() placeholder: string;
constructor() {}
ngOnInit() {}
}
form.component.html
<app-pf-input-text [ctrl]="nomeControl"></app-pf-input-text>
关于angular - 输入时 FormControl 不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49784580/
根据 the documentation , NLog 提供了一个 FormControl 目标,它将日志消息写入 Windows 窗体上控件的 Text 属性。但是,当我将 FormControl
以下是我的指令: restrict: 'E', scope: { }, templateUrl: 'directives/my.directive.html', link: function(scop
有没有办法在 Angular2+ 中声明表单模型时向 FormControl 添加任意元数据? 类似于: // In this fake example, {foo: 'bar'} is the me
如何在输入 FormControl 中显示一些不等于此 FormControl 值的文本? 例如,从服务器获取一些对象 - {id: 1, name: "Name1"} ,并设置 value Form
我正在研究 Angular Reactive 表单。这是我的组件类代码: ngOnInit(){ this.reviewForm = this.fb.group({
FormControl 在处理指令时遇到困难... 我正在尝试在我的输入字段中实现自动完成功能。我正在使用以下 Angular Material 指南,我逐字复制并粘贴了他们的 typescript
我正在使用 Angular 8 和 Reactive Forms。 在我的模板中,我有如下代码: 想法是,如果 validationError 为“truthy”,则在输入元素中添加红色边框。 无法
有没有办法检查是否需要控制? 当我实现一个专用的表单字段组件时出现了问题,该组件接受 FormControl 并且不仅有 输入 而且还有验证错误。由于某些字段是必需的,因此最好让用户知道 * 是否需要
FormControl 在处理指令时遇到困难... 我正在尝试在我的输入字段中实现自动完成功能。我正在使用以下 Angular Material 指南,我逐字复制并粘贴了他们的 typescript
我正在使用 Angular 8 和 Reactive Forms。 在我的模板中,我有如下代码: 想法是,如果 validationError 为“truthy”,则在输入元素中添加红色边框。 无法
我有一系列的项目。每个项目将通过使用 ng-repeat 和 ng-form 动态关联到一个表单。 ... 然后我就有可能创建新项目。但是当我这样做时,我希望他们的新形式变得变脏。 ADD
我想通过自定义指令将验证器动态添加到我的 FormControl。 @Directive({ selector: "[idNumber]", }) export class IdNumberD
我正在使用 Sematinc-UI 和 Angular2 ReactiveFormsModule 表单,我想使用 [formControl] 来选择多个。 如果我使用 select 它可以正常工作:
我现在已经根据一些逻辑从一个大型 FormGroup 中过滤掉了几个 FormControl - 我想知道如何合并/组合这些选定的 FormControl 并且只有一个订阅.. 我查看了 RxJS 文
我有 3 个字段与表单链接,类型为数字,当我修改字段 A 时,它会修改字段 B 和 C,当我修改字段 B 时,它会修改字段 A 和 C,当我修改字段 C 时,它会修改字段 A 和B相应地。 我的组件如
我有表单数组 FormGroup; let forms = [this.form1, this.form2]; 每个表单都有几个控件:FormControl。 如何向 FormControl 添加额外
我有一个使用自定义组件作为输入的表单,它接收一个 ControlName。当我在组件中键入内容时,它不会更新“错误”属性。 app-pf-input-text.ts: import { Compone
我讨论了表单应该如何与同事合作,我们对后端驱动的输入字段应该如何响应用户输入有不同的想法。 此讨论基于 Angular's definition of pristine "pristine" mean
我有包含 FormArray 的 FormGroup。由系统生成的 FormArray 中的每个 FormControls 如下所示: staffs: FormArray = { staffs
我使用的框架(Angular 7)。 我想像这样为 FormControl 设置一些类型。 startDate: FormControl; endDate: FormControl;
我是一名优秀的程序员,十分优秀!