Question

我已经设置了这个表单组（使用被动表单）。

this.transactionForm = fb.group ({
      'location': [null, Validators.required],
      'shopper': [null],
      'giftMessage': [null],
      'retailPrice' : [0, Validators.required]
    });

正如您所看到的，shopper和giftMessage没有设置Validators.Required，我希望它们是可选字段。表格的其余部分是必需的。

我很好奇的是......当页面加载时，所有字段都设置为ng-invalid，包括上面的可选字段shopper和giftMessage。不幸的是，当提交表单时，我将transactionForm.valid传递给我的提交函数，并且表单无效，因为未选择可选字段。

我有点困惑为什么这些可选字段首先被标记为ng-invalid？我该怎么做才能防止表单组中可选字段的无效表单？

以下是我设置我的选择的方法：

<select [ngModel]="null" formControlName="shopper" style="margin-left:35px;" required>
            <option value="null" disabled selected>{{'SelectOption' | translate}}</option>
            <option *ngFor="let shopper of shoppers">{{shopper | translate}}</option>
        </select>

这里'我注意到在运行时发生了......这些是添加到字段中的类：class="ng-touched ng-pristine ng-invalid"

我试图将这些添加到我的构造函数中：

this.transactionForm.controls['shopper'].markAsTouched();
this.transactionForm.controls['shopper']..setErrors({incorrect: false});

我仍然无法控制该控件。

Answer 1

试试这个：

<select [formControl]="transactionForm.get('shopper')" >
  <option [value]="null">{{'SelectOption' | translate}}</option>
  <option *ngFor="let shopper of shoppers" [value]="shopper" >{{shopper | translate}}</option>
</select>

Answer 2

对于使用反应形式的可选输入，您可以通过使用python

告诉角度不考虑某些输入

因此，在这种情况下，您可以为输入添加[ngModelOptions]="{standalone: true}"，但可以从中删除[(ngModel)]。

可选字段标记为ng-invalid

2 个答案: