我有一个使用自定义组件作为输入的表单,它接收一个ControlName。它没有更新错误'我在组件中输入内容时的属性。
应用-PF-输入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() {
}
}
应用-PF-输入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>
它在&#39; ControlName&#39;中提供了初始值,但在我输入输入时它永远不会更新。
{{nomeControl.errors | json}} - {{nomeControl.dirty}}
返回:
{&#34; required&#34;:true} - false
当您在输入中输入内容时,这些值不会更新。
答案 0 :(得分:3)
您正在混合反应和模板驱动的表单。您的PfInputTextComponent
有一些问题。使用Reactive Forms,您不需要required
,maxLength
,minLength
和disabled
输入。您需要FormControl
输入。如果使用Reactive Forms,则在组件类中设置值和验证器,而不是在模板中。
this.nomeControl = new FormControl('', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(10)
]);
这足以设置验证和初始值。您现在需要做的就是使用<input />
指令将此控件绑定到您的html [formControl]
。
应用-PF-输入text.html 强>
<div class="input-group">
<input [formControl]="ctrl" type="text" class="form-control">
</div>
应用-PF-输入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>