2

我有一个输入字段很少和自定义下拉列表的表单。问题是：我可以将 my-custom-dropdown 组件设置为必需吗？

我的表格看起来像这样：

<form name="myform" (ngSubmit)="onSubmit()" #myform="ngForm">
    <!-- other fields omitted for brevity -->
    <my-custom-dropdown name="someValue" #someValue="ngModel" [(ngModel)]="model.someValue"></my-custom-dropdown>

    <button type="submit">Submit</button>
</form>

我的下拉组件基本上是一个自定义组件，看起来像这样：

<div>
    <label>
        Set some value
    </label>
    <p class="form-control-static">{{model.name}}</p>
    <ul>
        <my-custom-dropdown-item *ngFor="let option of options; let i = index" [(value)]="model" [option]="option"></my-custom-dropdown-item>
    </ul>
</div>

最后我有这样的下拉项目：

<li>
    <!-- some structural and styling stuff omitted for brevity -->
    {{option.name}}
</li>

我正在使用最新版本的 Angular2。我没有包含 Typescript 文件，但长话短说，my-custom-dropdown 组件实现了 ControlValueAccessor。

4

3 回答 3

2

那么，您的组件需要实现 ControlValueAccessor。这个话题的一些很好的解释。似乎 formControl 依赖于 NG_VALUE_ACCESSOR，如果不是请任何人提供一些不同的解决方案。要制作所需的组件：

1）在选择器标签中，使用组件插入formControlName指令和ngModel

<drop-down [items]="itemsOfQuestionType" [label]="questionTypeLabel" (change)="onChooseQuestionType($event)" formControlName="questionTypeDropDown" [(ngModel)]="selectedQuestionTypeId"></drop-down>

2) 代码中的某个地方需要定义验证规则。

complexForm : FormGroup;
formBuilder: FormBuilder;
ngOnInit() {
    this.complexForm = this.formBuilder.group({
        questionTypeDropDown: ['', [Validators.required]]
    });
}

然后您可以使用 FormGroup 的有效属性。

<button [disabled]="!complexForm.valid">Text</button>
于 2016-11-18T14:05:48.303 回答
2

我最终做的是一个简单的指令，我可以将其应用于下拉组件：

import { Directive } from '@angular/core';
import { AbstractControl, ValidatorFn, Validator, FormControl, NG_VALIDATORS } from '@angular/forms';

//validation function
function validateDropdownFactory(): ValidatorFn {
    return (c: AbstractControl) => {
        let isValid = c.value !== null;

        if (isValid) {
            return null;
        }
        else {
            return {
                dropdownRequired: {
                    valid: false
                }
            };
        }
    }
}

@Directive({
    selector: '[dropdownRequired][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: DropdownRequired, multi: true }
    ]
})

export class DropdownRequired implements Validator {
    validator: ValidatorFn;

    constructor() {
        this.validator = validateDropdownFactory();
    }

    validate(c: FormControl) {
        return this.validator(c);
    }
}

然后我像这样应用它：

<my-custom-dropdown name="someValue" #someValue="ngModel" [(ngModel)]="model.someValue" dropdownRequired></my-custom-dropdown>
于 2016-11-22T12:10:06.320 回答
0

这取决于您是否已将实际下拉列表定义为组件。

如果您使用的是响应式表单，您应该能够轻松地将 Required 验证器添加到您正在创建的控件中，如下所示：

 let myControl = new FormControl(null , Validators,required);

这将使下拉菜单成为必需。

如果您使用模板驱动的表单，您仍然可以拥有它，您只需将required=true属性设置为元素。

还有很多其他的方法。

就像，您可以创建一个指令，将所需字段添加到控件中，我猜 Angular2 已经在这样做了。

于 2016-11-17T10:28:53.360 回答