使用对象作为值的角度检查单选按钮

时间:2017-11-13 23:20:38

标签: angular angular-forms

我在Angular 5上构建了一个表单,我有一组按组分组的单选按钮,我想根据对象值检查这些单选按钮。到目前为止,这是我的代码:

.TS

constructor(
    private _params: ActivatedRoute,
) {
    _params.queryParams.subscribe(param => {
        this.param = param;
    });

    this.filterForm = new FormGroup({
        'filter': new FormControl(this.param, [
            Validators.required,
        ])
    });
}

html的

<form novalidate [formGroup]="filterForm" (ngSubmit)="onSubmit()">
    <article>
        <h4>Model</h4>

        <fieldset *ngFor="let item of models; let i = index">
            <input id="M{{i}}" type="radio" formControlName="filter" [value]="{model: item.url}" />
            <label for="M{{i}}"><span></span> {{item.name}}</label>
        </fieldset>
    </article>

    <article>
        <h4>Type</h4>

        <fieldset *ngFor="let item of types; let i = index">
            <input id="T{{i}}" type="radio" formControlName="filter" [value]="{type: item.url}" />
            <label for="T{{i}}"><span></span> {{item.name}}</label>
        </fieldset>
    </article>

    <article>
        <h4>Color</h4>

        <fieldset *ngFor="let item of colors; let i = index">
            <input id="C{{i}}" type="radio" formControlName="filter" [value]="{color: item.url}" />
            <label for="C{{i}}"><span></span> {{item.name}}</label>
        </fieldset>
    </article>

    <button>Apply filter</button>
</form>

在初始化表单时,在单击任何单选按钮选项之前,我可以按照预期的方式获取表单值,例如:

{color: "Blue"};

当我点击一个单选按钮时,同样的事情发生了,它按预期工作,给出正确的输出并按预期进行选择。

问题是当我第一次初始化表单时,没有单选按钮标记为已选中。仅在第一次点击后。

由于表格也在一个div内,用ngIf来显示/隐藏要过滤的选项,当我隐藏和显示时,按钮会再次失去它的选择。

因此,如果我已经在URL上有一个参数并将其传递给表单,则不会选择单选按钮。我希望它被选中,因为[value]属性上的表单值和值是相同的。如果我单击相同的按钮进行选择,则表单值保持不变。

在这种情况下,我做错了什么?

0 个答案:

没有答案