如何引用 TypeScript 中的 FormControl？

Question

我这里有一个下拉 FormControl

    <ng-container *ngIf="formValueChanges$ | async as updatedForm">
    {{update(updatedForm)}}
    </ng-container>
    <form [formGroup]="vestedOptionsDetailForm" (ngSubmit)="submit()">
        <div class="justify-content-center">
            <mat-card class="" [ngClass]="routeAnimationsElements">
                <div fxLayout="column">
                    <mat-card-title style="margin-left:50px; margin-bottom:20px;">
                        Vested Options
                    </mat-card-title>
                    <mat-card-content>
                        <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px" class="fnol-min-widht50">
                             <div style="  width: 40%;">
                                 <div *ngIf="!hidden" [ngClass]="[routeAnimationsElements,'add-marging-bottom40']">
                                     <mat-form-field>
                                         <mat-select placeholder="Vested Options" formControlName="vestedoptions" [id]="vestedoptions" mask="" thousandSeparator="">
                                              <mat-option selected></mat-option>
                                              <mat-option [value]="Option1">
                                                  Option 1
                                              </mat-option>
                                         </mat-select>
                                     </mat-form-field>
                                 </div>
                             </div>
                         </div>
                     </mat-card-content>
                 </div>
            <mat-card-actions>
                <div class="row buttons d-flex" fxLayoutAlign="end" style="margin-right:25px;">
                <div class="row buttons justify-content-between pad form-container-action-buttons">
                <button mat-raised-button type="button" (click)="goBack()" [ngClass]="routeAnimationsElements">Close</button>

                <button mat-raised-button color="primary" type="submit" [ngClass]="routeAnimationsElements" [disabled]="!vestedOptionsDetailForm.valid||vestedOptionsDetailForm.pristine" (click)="goForward()">SAVE TO QUEUE</button>
          </div>

        </div>
      </mat-card-actions>
    </mat-card>
  </div>
</form>

如何引用并添加到我的 typescript FormGroup vestedOptionsDetailForm 中，然后拉取值？ 我在 ngOnInit 中添加了一条评论，我想在其中编写代码来访问 FormControl，这样我就可以从 FormControl 中获取值并通过 NGRX 操作将其发送到 API 服务调用。

我想初始化 FormGroup 并将我在 html 中创建的 FormControl 添加到其中。 我该怎么做呢？

这是我的组件

    import { Component, OnInit } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms';

    @Component({
        selector: 'dialog-vested-options',
        templateUrl: './dialog-vested-options.component.html',
        styleUrls: ['./dialog-vested-options.component.scss'],
    })
    export class DialogVestedOptions implements OnInit {
        routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
        vestedOptionsDetailForm: FormGroup;
        vestedoptions: FormControl;
        formValueChanges$: Observable<VestedOptionsFormModel>;
        questions: any[];
        hidden: boolean;

        private policy: Policy;
        private formNames: string[];
        private quoteEffData: string;

        constructor(public dialogRef: MatDialogRef<DialogVestedOptions>,
            private store: Store<AppState>,
            private questionService: QuestionService,
            private questionControlService: QuestionControlService) {
    }

    ngOnInit() {
    //I want to access the FormControl here and add it to my FormGroup vestedOptionsDetailForm


    this.hidden = false;
    }

....

    submit() {
...
    }

...
}

Answer 1

您需要初始化表单。 无需将表单控件声明为 class 的属性。

你可以这样做：

ngOnInit() {
   this.vestedOptionsDetailForm = new FormGroup({
       vestedoptions: new FormControl(null, [Validators.required etc])
   })
}

您还可以使用FormBuilder服务来初始化您的表单：

constructor(private _fb: FormBuilder) {}

ngOnInit() {
   this.vestedOptionsDetailForm = this._fb.group({
       vestedoptions: [null, [Validators.required, etc]]
   })
}

我已将 null 作为控件的值传递，但如果需要，您可以传递默认值。