可选字段被标记为 ng-invalid

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 传入我的提交函数并且表单无效，因为可选字段未被 select 编辑。

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

以下是我如何设置 select 例如：

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

我仍然收到该控件的 ng-invalid。

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

对于使用响应式表单时的可选输入，您可以使用 [ngModelOptions]="{standalone: true}"

告诉 angular 不考虑某些输入

所以在这种情况下，您可以添加 [(ngModel)] 作为您的输入，但您可以从中删除 formControlName。

可选字段被标记为 ng-invalid

Optional field is marked as ng-invalid

typescript

angular

angular-reactive-forms