验证具有默认值的文本框

Question

我有一个如下的文本框：

  <div form="form-group">
    <label for="Title"> <h3>Title:</h3>  </label>
    <div [ngClass]="{
    'has-errors': (dataProcessingEditForm.controls.Title.errors && dataProcessingEditForm.controls.Title.dirty ),

    'has-success': (!dataProcessingEditForm.controls.Title.errors )
    }">
      <input type="text" name ="Title" class="form-control" autocomplete="off" placeholder="*Title"
             value="{{theDP.title}}" formControlName="Title">
      <!--Validations-->
      <ul class="help-block">
        <li *ngIf="(dataProcessingEditForm.controls.Title.errors?.required && dataProcessingEditForm.controls.Title.dirty)
                   ">
          This field is required</li>
      </ul>
    </div>
  </div>

文本框由我在 ngOnInit() 函数中从 DB 读取的数据填充。 显然，验证器不承认它具有价值，所以它要求我填写它。我应该如何修改验证器以实现价值？我使用了以下内容：

'has-success': (!dataProcessingEditForm.controls.Title.errors || dataProcessingEditForm.controls.Title.hasValue )

但似乎不起作用。 非常感谢您的帮助。

Answer 1

只需用 ngModel 替换值

<div form="form-group">
    <label for="Title"> <h3>Title:</h3>  </label>
    <div [ngClass]="{
    'has-errors': (dataProcessingEditForm.controls.Title.errors && dataProcessingEditForm.controls.Title.dirty ),

    'has-success': (!dataProcessingEditForm.controls.Title.errors )
    }">
      <input type="text" name ="Title" class="form-control" autocomplete="off" placeholder="*Title"
             ngModel="theDP.title" formControlName="Title">
      <!--Validations-->
      <ul class="help-block">
        <li *ngIf="(dataProcessingEditForm.controls.Title.errors?.required && dataProcessingEditForm.controls.Title.dirty)
                   ">
          This field is required</li>
      </ul>
    </div>
  </div>