Question

我在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 个答案: