在编辑输入之前,所需角度验证不允许窗体有效。

我在下面的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>

这是一个电子邮件字段。

[必选]=“问题。必选”

下面是一个表单按钮,当表单有效时需要启用该按钮。

 <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);


  }