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

那么，您的组件需要实现ControlValueAccessor。 this topic的一些很好的解释。看起来formControl已经取决于NG_VALUE_ACCESSOR，如果不是请任何人提供一些不同的解决方案。要使组件需要：

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

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

2）代码中的Somwhere需要定义验证规则。

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

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

<button [disabled]="!complexForm.valid">Text</button>

Answer 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>

Answer 3

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

如果您正在使用被动表单，则应该能够轻松地将必需的验证程序添加到您正在创建的控件中：

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

这将使下拉列表成为必需。

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

还有很多其他方法。

就像，你可以创建一个可以向控件添加必需字段的指令，我猜Angular2已经在做了。

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

3 个答案: