将 Required 设置为自定义 Angular2 下拉组件

Question

我有一个只有几个输入字段和一个自定义下拉列表的表单。问题是：我可以将 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。

Answer 1

这取决于您将实际的下拉菜单定义为组件。

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

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

这将使下拉菜单成为必填项。

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

还有很多其他方法。

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

Answer 2

嗯，您的组件需要实现 ControlValueAccessor。 this topic 的一些很好的解释。似乎 formControl 依赖于 NG_VALUE_ACCESSOR，如果不是，请任何人提供一些不同的解决方案。使组件成为必需的：

1) 在selector标签中，使用组件插入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>

Answer 3

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

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>

将 Required 设置为自定义 Angular2 下拉组件

Set Required to a custom Angular2 dropdown component

angular

required

form-fields