为控制值分配了“未定义”

时间:2018-10-24 14:09:20

标签: angular forms

我正在开发一个有角度的应用程序,并且我有一个表格,其中有一个主要问题,答案为“是” /“否”,并且根据用户的选择,如果用户选择“是”,则子问题带收音机按钮并输入文本,然后启用,用户可以输入值。 因此,在ngInit上,我确实通过启用控件的方式来订阅main值的更改。

代码如下:

<div>
            <div class="form-field" [ngClass]="{'ng-invalid': submitted && formModel.hasError('required','Q4')}">
                <p>4. Are you an entity that is an issuer of securities registered ?</p>
                <div class="radio" *ngFor="let answer of answers">
                    <label>
                        <input type="radio" name="Q4" formControlName="Q4" ngModel [value]="answer"> {{answer}}
                    </label>
                </div>
            </div>
            <div class="form-field" [ngClass]="{'ng-invalid': submitted && (formModel.hasError('required','Q4a')
                               || formModel.hasError('invalidSECIndexKeyError','Q4a'))}" >
                <p>4a. The relevant SEC Central Index Key number for that party:</p>
                <div class="number">
                    <input type="text" formControlName="Q4a" maxlength="10"
                           (keypress)="validateTheSECKeyPress($event)" required  />
                </div>
                <div class="field-errors" *ngIf="submitted && formModel.get('Q4a').invalid && formModel.get('Q4a').errors">
                    <ng-container *ngFor="let error of formModel.get('Q4a').errors | objectEntries">
                        <li>
                            {{ getValidationErrorMessage(error.key, error.value) }}
                        </li>
                    </ng-container>
                </div>
            </div>
            <div class="form-field" [ngClass]="{'ng-invalid': submitted && formModel.hasError('required','Q4b')}">
                <p>4b. Whether an appropriate committee of that counterparty’s board of directors
                    (or equivalent body) has reviewed and approved the decision to enter into swaps.</p>
                <div class="radio" *ngFor="let answer of answers">
                    <label>
                        <input type="radio" name="Q4b" formControlName="Q4b" 
                               ngModel [value]="answer"> {{answer}}
                    </label>
                </div>
            </div>

        </div>

在ngInit中,我有以下代码:

ngOnInit() {
    this._formSubscriptions = new Rx.Subscription();

    let Q4sub = this.formModel.get('Q4').valueChanges.subscribe(
        (val) => {
            let ctrl1 = this.formModel.get('Q4a');
            let ctrl2 = this.formModel.get('Q4b');
            if (val === 'Yes') {
                ctrl1.enable();
                ctrl2.enable();
            } else {
                ctrl1.disable();
                ctrl1.reset();
                ctrl2.disable();
                ctrl2.reset();
            }
        }
    );

    this._formSubscriptions.add(Q4sub);
}

但是我看到的是,如果表单从数据库中预加载了值,并且问题Q4填充了“否”值,并且当用户尝试将值更改为“是”时,其他控件将分配给“未定义”值它们,因此两个控件均保持禁用状态。对于少数记录,这种情况是随机发生的。但是其他记录也可以。

如何处理这些随机的“未定义”控制值?

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,但是我不确定检查像下面这样的未定义值是否是一个好习惯

if(val === undefined)
{
}

还是使用if(!val)检查未定义的更好?