如何使用QuerySelector从角度材质表单中检索值

Posted 2021-04-07

我尝试使用javascript document.querySelector从角度中检索值。我能够检索输入字段值但是当我来到单选按钮，切换并选择框时，我无法检索值。我无法使用检索值

(document.querySelector('.recurring_subscription') as htmlInputElement).value
(document.querySelector('.given_to') as HTMLInputElement).value
(document.querySelector('.billing_state') as HTMLInputElement).value



<mat-slide-toggle class="mat-toggle-nusa" class="recurring_subscription" formControlName="recurring_subscription">
  Automatic donate this amount once every Month
              </mat-slide-toggle>
 <mat-radio-button *ngFor="let dt of nusa_given" class="given_to" [value]='dt.value' > {{dt.name}} </mat-radio-button>

<mat-select formControlName="billing_state" class="billing_state" placeholder="Enter State (required)">
                        <mat-option *ngFor="let state of getNameOfStates | async" [value]="state.abbreviation">
                          {{ state.abbreviation }}
                        </mat-option>
                      </mat-select>

答案

我认为您不应该使用document.querySelector来获取输入元素的值。您可以使用ngModel对每个变量进行双向绑定，并直接访问变量。

无论如何，对于幻灯片切换，您有两个类属性：

class="mat-toggle-nusa" class="recurring_subscription"

试试这个：

class="mat-toggle-nusa recurring_subscription"

对于单选按钮，同一类中有多个元素。你在ngFor中使用given_to。该循环中的每个元素都具有相同的类名。

类billing_state没有您尝试访问的value属性。

此外，您应该知道单选按钮应该包含在<mat-radio-group>中，该https://material.angular.io/components/radio/examples包含无线电组的值。这就是你知道什么单选按钮被选中的方式。示例：qazxswpoi