家伙,
我正在努力为名称输入创建一个验证器,我只是从角wiki回复了代码,但仍然无法正常工作。
能帮我找到问题吗?
感谢劝告。
我的HTML代码:
<form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
<div class="form-group">
<label for="namePro">Nom</label>
<input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
<div *ngIf="namePro.invalid && (namePro.dirty || namePro.touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="namePro.errors.required">
El Nom del professional es obligatori
</div>
</div></form>
还有我的TS组件
formAlta: FormGroup;
ngOnInit() {
this.formAlta = new FormGroup({
idPro: new FormControl(),
documentTypePro: new FormControl(),
namePro: new FormControl('',[Validators.required]),
rProfessional: new FormControl(this.tipusPro),
firstSurnamePro: new FormControl(),
secondSurnamePro: new FormControl(),
businessNamePro: new FormControl(),
idCli: new FormControl(),
documentTypeCli: new FormControl(),
nameCli: new FormControl('',Validators.required),
rClient: new FormControl(this.tipusCli),
firstSurnameCli: new FormControl(),
secondSurnameCli: new FormControl(),
businessNameCli: new FormControl(),
idPermis: new FormArray([]),
dateFiPermis: new FormArray([])
});
}
答案 0 :(得分:0)
您应按照以下步骤在component.ts中创建一个getter方法,以在模板中获取表单控件
get formAltaControls(): any {
return this.formAlta['controls'];
}
在您的componen.html
<div *ngIf="formAltaControls.namePro.invalid && (formAltaControls.namePro.dirty || formAltaControls.namePro.touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="formAltaControls.namePro.errors.required">
El Nom del professional es obligatori
</div>
答案 1 :(得分:0)
我认为您必须使用类似的方法更改代码
<form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
<div class="form-group">
<label for="namePro">Nom</label>
<input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
<div *ngIf="formAlta.controls['namePro'].invalid && (formAlta.controls['namePro'].dirty || formAlta.controls['namePro'].touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="formAlta.controls['namePro'].errors.required">
El Nom del professional es obligatori
</div>
</div></form>
答案 2 :(得分:0)
在html中,您可以使用以下波纹管
<form class="brown-text" [formGroup]="basicInfoForm">
<input type="text" class="form-control" formControlName="firstName" [ngClass]="{ 'is-invalid': (basicInfoForm.controls.firstName.errors) || (!basicInfoForm.controls.firstName.pristine && basicInfoForm.controls.firstName.invalid) }">
<!-- Validation messages -->
<div class="invalid-feedback" *ngIf="(basicInfoForm.controls.firstName.errors) || (!basicInfoForm.controls.firstName.pristine && basicInfoForm.controls.firstName.invalid)">
<div *ngIf="basicInfoForm.controls.firstName.errors">Name is required</div>
<div *ngIf="basicInfoForm.controls.firstName.errors">Only Alphabets with space between 2 to 20 characters</div>
</div>
<form>
在 .ts 文件中,您可以像下面这样使用波纹管
this.basicInfoForm = this.formBuilder.group({
firstName: new FormControl("Enter First Name", [Validators.required, Validators.pattern(this.PAT_NAME)])
});