Angular 要求的验证在输入被编辑之前不会让表单有效

Question

我有一个下面的 html 我已经实现了 HTML5 要求属性:

        <div class="col-sm-3">
            <label>{{question.placeholder}}<span *ngIf="question.required">*</span></label>
        </div>
        <div class="col-sm-9">
                <mat-form-field style="width:100%">
                        <input matInput [placeholder]="question.placeholder" [id]="question.key" [maxLength]="question.maxLength" [formControlName]="question.key"
                            type="email" [required]="question.required"[readonly]="question.readonly" [value]="question.value" (keyup)="checkValue($event, question)"
                            (paste)="checkPasteValue($event, question)">
                        <mat-hint align="end">{{question.value ? question.value.length : 0}} / {{question.maxLength}}</mat-hint>
                    </mat-form-field>

        </div>

这是一个电子邮件字段。

[必填]="question.required"

下面是一个表单按钮，需要在表单有效时启用。

 <button mat-raised-button class="md-primary md-raised pull-right" color="primary" style="margin-right:10px;" *ngIf="isEditMode" [disabled]="!dataEntryForm.valid"
        (click)="updateDataEntry($event)">UPDATE</button>

按钮在输入变脏之前不会启用，而它是预填充的。所以它应该满足要求。那么在这种情况下应该使用什么？

编辑使用服务预先填写表格：

 editSectionDataItem(item: any) {
    var me = this;
    // / var decodedItem = this.decodeDataArray([item]);
    // console.log(item, this.originalData);

    var decodedItem = this.originalData.filter(function (originalItem) {
      return originalItem.id == item.id;
    });

    console.log(decodedItem, item);
    var mission = {
      widgetConfig: this.widgetConfig,
      settings: this.settings,
      fields: this.fields,
      isEditMode: true,
      data: flattenJSON(decodedItem[0])
    }
    console.log(mission);
    this._widgetService.missionToOpenDataEntryForm(mission);


  }

Answer 1

您应该使用 [(ngModel)] 而不是 [value]。

[(ngModel)] 基本上是 Angular 表单的验证属性。没有它，您将无法跟踪输入的验证状态（至少在模板驱动的表单上）。

Angular 文档中关于此的更多信息，here and here

Angular 要求的验证在输入被编辑之前不会让表单有效

Angular required validation does not let form valid until input is edited

html

angular

angular-forms