如何使用 angular 中已存在的默认值强制输入字段？

Question

我有一个输入框并且已经有一些默认值的情况，我希望用户在提交表单之前向其中添加一些内容，否则它应该作为必填字段出现。

尝试了一些方法但对我没有用 -

我的HTML-

  <mat-form-field appearance="outline">
                            <mat-label>Value <mark *ngIf="isRequired" class="red">*</mark></mat-label>
                            <input formControlName="LinkFull" type="text" matInput autocomplete="off" />
                        </mat-form-field>

在我的 TS -

ngOnInit(){
...
this.form.get('LinkFull').setValue(Constants.DefaultValue);  
}

在某些下拉菜单更改中，我正在这样做 -

if(this.IDSelected == 1 ){
  if(this.form.get('LinkFull').value == Constants.DefaultValue){
    this.form.get('LinkFull').setValidators(Validators.required);
    this.form.get('LinkFull').updateValueAndValidity();
    this.isRequired = true;
  }
  else{
    this.form.get('LinkFull').clearValidators();
    this.form.get('LinkFull').updateValueAndValidity();
    this.isRequired = false;
  }
}
else{
    this.form.get('LinkFull').clearValidators();
    this.form.get('LinkFull').updateValueAndValidity();
    this.isRequired = false;
}

但在提交表单时，此字段仍未作为必填字段。谁能帮助实现这一目标？

Answer 1

您可以创建自定义验证器来检查默认值并使用它验证输入

export class customValidators{
    public static requiredWithDefault(defaultValue: string) {
            return (control: AbstractControl): ValidationErrors | null => {
                if (control.value == defaultValue)
                    return { defaultValue: 'value '+defaultValue+' is the default value' }
                return null;
            }
        }
}

然后在控制定义中使用它，例如

this.form=new FormGroup({
...,
LinkFull:new FormControl(Constants.DefaultValue,[customValidators.requiredWithDefault(Constants.DefaultValue)]),
...
})

Answer 2

由于 LinkFull 已经有一个值，因此不会由于您使用的所需验证器而导致错误。您可以创建自定义验证器，例如：

  static requiredNonDefault(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      return (!control.value || control.value === Constants.DefaultValue) ? { required: true } : null;
    };
  }

并改用它：

ngOnInit(){
...
this.form.get('LinkFull').setValidators(requiredNonDefault());  
}

如何使用 angular 中已存在的默认值强制输入字段？

How to make an input field mandatory with a default value already present in angular?

angular

angular-reactive-forms