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 字段启用提交表单的主要内容,如果未能解决你的问题,请参考以下文章

Angular 7 - 使用父可放置容器拖放

Angular 7 - 使用 FormControl 字段启用提交表单

如何在 Angular 7 中使用 jQuery 插件

Angular 7 CSS在使用可重用组件时不起作用

使用 Angular 7 显示 JSON 数据

不能在 Angular 7 中使用 Post 方法