Mat输入焦点无法正常工作Angular7

Question

我需要这样一个带有单选按钮和输入框的表单。

输入框otherPaymentAmount是必需的。我添加了(focus)作为事件来检查值是否为空或为null，然后模糊查看按钮。 但这没有发生我想念的事情吗？

相反，当我专注于输入框时，我最终会启用复查按钮。

component.ts

createDefaultForm() {
    this.scheduleForm = this._formBuilder.group({
      paymentAmount: [null],
      otherPaymentAmount: [null, Validators.required]
    });
  }


onBlur($event) {
      if (this.scheduleForm.controls.otherPaymentAmount.value === '' || this.scheduleForm.controls.otherPaymentAmount.value === null) {
        this.scheduleForm.controls.otherPaymentAmount.setErrors({'OTHER_AMT_REQUIRED': true});
      }

template.html

<div class="choose-payment-amount">Choose Payment Amount:</div>
        <mat-radio-group class="radio-group"  formControlName="paymentAmount" aria-label="choose payment amount">
          <mat-radio-button>
                 Minimum Payment Due> : {{scheduleForm.controls.toAccount.value.minPaymentDue | currency}}
          </mat-radio-button>
          <mat-radio-button>
                Statement Balance> :{{scheduleForm.controls.toAccount.value.lastStatementBalance | currency}}
          </mat-radio-button>
          <mat-radio-button>
                  Current Balance :{{scheduleForm.controls.toAccount.value.balance | currency}}
          </mat-radio-button>
          <mat-radio-button value="other">$
            <mat-form-field  [style.width.rem]="50">
            <mat-label>Other Amount</mat-label>
              <input required matInput  (focus)="onBlur()"
                     (click)="this.scheduleForm.controls.paymentAmount.setValue('other');"  formControlName="otherPaymentAmount">
              <mat-error *ngIf="scheduleForm.controls.otherPaymentAmount.invalid">
                {{errorMsgService.getAmountErrMsg(scheduleForm.controls.otherPaymentAmount)}}
              </mat-error>
             </mat-form-field>
          </mat-radio-button>
        </mat-radio-group>
      </div>

<div class="nav-btns">
        <button mat-button type="button" class="mat-button mat-raised-button" [disabled]="scheduleForm.errors || scheduleForm.invalid || scheduleForm.pristine " (click)="setDataToReview()"
                aria-label="REVIEW">REVIEW</button>
        <a class="cancel-link" aria-label="CANCEL">CANCEL</a>
      </div>

Answer 1

如果您使用[[ngModel）]来获取输入的值并将变量的值作为[value]，则也只能有一个控件。好。您需要添加一个（输入）并更新值，以及updateAnd有效性。好吧，在代码中，最后一个选项可以像

  <mat-radio-button class="example-radio-button" [value]="another">
    <mat-form-field class="example-full-width">
    <input matInput [(ngModel)]="another"
    [ngModelOptions]="{standalone: true}" 
    (input)="scheduleForm.get('paymentAmount').setValue(another);
             scheduleForm.get('paymentAmount').updateValueAndValidity();
             scheduleForm.get('paymentAmount').markAsDirty()">
    </mat-form-field>
  </mat-radio-button>

查看stackblitz