角质的。来自订阅的窗体控件值

Question

我有一张表格，看起来像这样：

userGroups的值取自Web，这里我遇到了一个问题。我实现了使用订阅并从http获取用户组的函数。表单在构造函数中创建。在这种情况下(显然)，userGroups的值是未定义的，因为它是在订阅中分配的。

export class UserAddComponent implements OnInit {
userForm: FormGroup;
userGroups: UserGroup[];

constructor(
    private http: HttpService,
    private fb: FormBuilder) {
        this.userForm = fb.group({
            'login': ['', [Validators.required]],
            'userGroups': this.fb.array(this.userGroups.map(x => !1)) // userGroups is undefined
        });
    }

    private getUserGroups() {
        this.http.get<ODataResponse>(`${this.soddApiUrl}/UserGroups`)
            .subscribe({
                next: (data: ODataResponse) => {
                    this.userGroups = <UserGroup[]>data.value;
                },
                error: () => { },
                complete: () => { }
            });
    }

    get login() { return this.userForm.get('login'); }
}

我尝试了另一种方法--在订阅中创建表单：

export class UserAddComponent implements OnInit {
userForm: FormGroup;
userGroups: UserGroup[];

constructor(
    private http: HttpService,
    private fb: FormBuilder) {
        this.http.get<ODataResponse>(`${this.soddApiUrl}/UserGroups`)
            .subscribe({
                next: (data: ODataResponse) => {
                    this.userGroups = <UserGroup[]>data.value;

                    this.userForm = fb.group({
                        'login': ['', [Validators.required],
                        'userGroups': this.fb.array(this.userGroups.map(x => !1))
                    });
                },
                error: (err) => { },
                complete: () => { }
            });
    }
  
    get login() { return this.userForm.get('login'); } // userFrom is undefined
}

在这种情况下，表单被创建得很好，但是我得到了登录，是模板中未定义的错误(因为在订阅中分配了userForm值)。

<form [formGroup]="userForm" (ngSubmit)="addUser()">
<div>
    <label for="login" class="label">Login</label>
    <input type="text" nbInput fullWidth id="login" formControlName="login"
          <!-- login is undefined here -->
          [status]="login.dirty ? (login.invalid  ? 'danger' : 'success') : 'basic'"
          [attr.aria-invalid]="login.invalid && login.touched ? true : null" />
</div>

<div>
    <label class="label">User Groups</label>
    <div *ngFor="let userGroup of userGroups; let i = index" formArrayName="userGroups">
        <nb-checkbox [formControlName]="i">{{userGroup.Title}}</nb-checkbox>
    </div>
</div>

因此，在第一种情况下，我无法访问在订阅中分配的数组，在第二种情况下，我无法获得表单控件的值，因为is已退出订阅。

有什么办法让它起作用吗？

谢谢!

Answer 1

将表单创建移动到OnInit方法

ngOnInit() {
  this.createForm();
}

private createForm() {
    this.userForm = fb.group({
        'login': ['', [Validators.required]],
        'userGroups': this.fb.array((this.userGroups || []).map(x => !1)) // add empty array to avoid undefined error
    });
}

然后在订阅的方法中再次调用创建表单。

yourHttpMethod() {
   this.http.get<ODataResponse>(`${this.soddApiUrl}/UserGroups`)
        .subscribe({
            next: (data: ODataResponse) => {
                this.userGroups = <UserGroup[]>data.value;

                this.createForm();
            },
            error: (err) => { },
            complete: () => { }
        });
}

如果您不能丢失初始订阅，那么在订阅中使用修补格式。