角6 [ngValue]未定义

Question

我正在使用角6，并试图创建一个表单，其中包括一个下拉菜单和标签使用ngValue在其中。这是我的代码：

视图：

 <div class="form-group">
                        <label class="col-md-4">Title</label>
                        <select formControlName= "current_status" name="current_status">
                        <option [ngValue]="">Select any one</option>
                        <option [ngValue]="option-1">option-1</option>
                        <option [ngValue]="option-2">option-2</option>
                        <option [ngValue]="option-3">option-3</option>
                        <option [ngValue]="option-4">option-4</option>

                    </select>
                </div>

当我试图提交表单时，所选的值未定义。

错误：

角运行在开发模式中。调用enableProdMode()来启用生产模式。 {.，current_status:未定义}

Answer 1

试着用value代替

<select formControlName="current_status" name="current_status">
    <option [value]="">Select any one</option>
    <option [value]="option-1">option-1</option>
    <option [value]="option-2">option-2</option>
    <option [value]="option-3">option-3</option>
    <option [value]="option-4">option-4</option>
</select>

Answer 2

您可以使用“值”选项。

<select formControlName="title">
            <option value="vk">Vkontakte</option>
            <option value="fb">Facebook</option>
            <option value="tw">Twitter</option>
            <option value="gp">Google</option>
        </select>

Answer 3

像这样使用它

            <div class="form-group">
                    <label class="col-md-4">Title</label>
                    <select formControlName= "current_status" name="current_status">
                     <option value="">Select any one</option>
                     <option value="{{option.1.value}}">{{option.1.name}}</option>
                     <option value="{{option.2.value}}">{{option.2.name}}</option>
                     <option value="{{option.3.value}}">{{option.3.name}}</option>
                     <option value="{{option.4.value}}">{{option.4.name}}</option>

                </select>
            </div>

在类型记录文件中，创建一个名为option的数组，其中包含一个value属性和一个name属性

您还可以通过创建一个数组选项来创建一个for循环。

然后用这样的方式代替选择

<select formControlName= "current_status" name="current_status" *ngFor="let option of options">
<option value="{{option.value}}">{{option.name}}</option>
</select>

如果HTML是正确的，那么这将为您制作数组的时间设置一个选项，希望您喜欢我的答案，我也会帮助您。

注意:如果您希望第一个选择类似于选择任意一个，则将值保留为空，而名称选择任意一个