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>

这是一个电子邮件字段。

[需要] =＆＃34; question.required＆＃34;

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

 <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和here

在编辑输入之前，角度必需的验证不会使表格有效

1 个答案: