Question

当没有选择值时，我一直在努力验证具有默认“select”选项的Reactive表单到我的选择输入框。如果表单中存在值，则需要选择相应的值。

我正在使用被动形式，下面是我的代码实现：

<select class="form-control" formControlName="environment" >
    <option disabled [value]="null">-- Select --</option>
    <option *ngFor="let ami of envs" [value]="ami.amiid">
        {{ami.name}}
    </option>
</select>

this.onlineTestForm = this._fb.group({
            .
            .    
            environment: ['', Validators.required],
            .
            .         
        });

//value is present in the model
(<FormControl>this.onlineTestForm.controls['environment'])
           .setValue(this.model.environment, { onlySelf: true });

//value is not present in model
(<FormControl>this.onlineTestForm.controls['environment'])
           .setValue('null', { onlySelf: true });

有没有更好的方法来实现上述目标？

Answer 1

你的问题在这里：

(<FormControl>this.onlineTestForm.controls['environment'])
       .setValue('null', { onlySelf: true });

您设置字符串值'null'而不是null。字符串'null'当然是有效值。

此外，您正在设置一个完整的对象作为表单控件的值（如果它存在），即使environment只需要id，至少是您在模板中指定的内容：

[value]="ami.amiid"

我在这里看到两个选项来“改进”你的代码。这取决于this.model是否异步获取值。如果你知道初始化this.model的值，你可以这样做：

environment: [this.model.environment || null, 
              Validators.required]

这里我们必须记住将model初始化为空对象，以便在undefined中没有值时不会抛出model错误。

如果异步设置model值，请在获取后使用setValue设置值：

this.onlineTestForm.controls.environment.setValue(...)

反应表单验证将选择输入框的默认“选择”值视为有效

1 个答案: