Angular 7 - 使用 FormControl 字段启用提交表单
Posted
技术标签:
【中文标题】Angular 7 - 使用 FormControl 字段启用提交表单【英文标题】:Angular 7 - enable submit form with FormControl field 【发布时间】:2021-02-10 15:37:18 【问题描述】:我的 FormGroup 有 3 个字段:2 个文本字段和 1 个 FormControl。
所有字段都是必需的,FormControl 有一个特定的验证器:
generateForm(scanfolder)
console.log('generateForm');
this.origineControl.setValidators(this.forbiddenNamesValidator(this.options))
const fb: FormBuilder = new FormBuilder();
this.scanfolderForm = fb.group(
'fullpath': [scanfolder.fullpath, [Validators.required]],
'name': [scanfolder.name, [Validators.required]],
'origin': [this.origineControl, [Validators.required]],
);
具体控制:
forbiddenNamesValidator(names: string[]): ValidatorFn
return (control: AbstractControl): [key: string]: any | null =>
console.log(typeof control );
console.log(control.value );
// below findIndex will check if control.value is equal to one of our options or not
const index = names.findIndex(name =>
return (new RegExp('\^' + name + '\$')).test(control.value);
);
return index < 0 ? 'forbiddenNames': value: control.value : null;
;
填充字段后,必须启用提交表单按钮,但它不起作用:
之前
之后:
我们可以看到按钮可用,而第二个字段有错误
这是我的 html:
<form [formGroup]="scanfolderForm">
<div class="row">
<mat-form-field class="col-md-4">
<input matInput placeholder="Chemin complet" formControlName="fullpath" name="fullpath">
<mat-error *ngIf="scanfolderForm.controls['fullpath'].errors?.incorrectName">Saisie incorrecte</mat-error>
</mat-form-field>
<mat-form-field class="col-md-4">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="origineControl" [matAutocomplete]="auto" required>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
option
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="origineControl.hasError('forbiddenNames')">
You should enter value from suggested one only. <strong>'origineControl.errors.forbiddenNames.value'</strong> is not allowed.
</mat-error>
<mat-error *ngIf="origineControl.hasError('required')">
This is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="col-md-4">
<input matInput placeholder="Nom" formControlName="name" name="name">
</mat-form-field>
</div>
</form>
<mat-dialog-actions *ngIf="!loading">
<button class="btn btn-primary" *ngIf="action === 2 && !isDisabled" (click)="cuScanfolder()"
[disabled]="!scanfolderForm.valid">M.A.J</button>
<button class="btn btn-warning" *ngIf="data.list.length < 2" (click)="nextOne()" cdkFocusInitial>Retour</button>
</mat-dialog-actions>
【问题讨论】:
【参考方案1】:来自official
在运行时添加或删除验证器时,必须调用 updateValueAndValidity() 以使新验证生效。
this.origineControl.setValidators([this.forbiddenNamesValidator(this.options), Validators.required]);
const fb: FormBuilder = new FormBuilder();
this.scanfolderForm = fb.group(
'fullpath': [scanfolder.fullpath, [Validators.required]],
'name': [scanfolder.name, [Validators.required]]
);
this.scanfolderForm.addControl('origin', this.origineControl)
this.scanfolderForm.updateValueAndValidity();
<mat-form-field class="col-md-4">
<input type="text" placeholder="Pick one" aria-label="Number" matInput formControlName="origin" [matAutocomplete]="auto" required>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
option
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="scanfolderForm.get('origin').hasError('forbiddenNames')">
You should enter value from suggested one only. <strong>'scanfolderForm.get('origin').errors.forbiddenNames.value'</strong> is not allowed.
</mat-error>
<mat-error *ngIf="scanfolderForm.get('origin').hasError('required')">
This is <strong>required</strong>
</mat-error>
</mat-form-field>
【讨论】:
感谢您的回答。但是还是不行 你可能绑定在错误的控件而不是[formControl]="origineControl"
,你应该formControlName="origin"
,不是吗?以上是关于Angular 7 - 使用 FormControl 字段启用提交表单的主要内容,如果未能解决你的问题,请参考以下文章