代码之家 › 专栏 › 技术社区 › Tjaart van der Walt

禁用窗体组未按预期工作

angular

Tjaart van der Walt · 技术社区 · 6 年前

初始化时 FormGroup 或 FormControl HttpClient.get 窗体组 在HTML中未禁用,但 disabled 属性报告为 true .

请参阅工作示例 here

我可以通过将禁用的代码包装为超时来修复此问题,如下所示,但这并不可取:

setTimeout(() => {
    this.form.disable();
});

当不设置 窗体组 一个新的实例,但我想把它设置为一个新的实例。

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { PersonService } from './person.service';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `  
        <form [formGroup]="form">    
        <button class="btn btn-primary" (click)="onFetchPerson()">Click Me</button>                
            <div class="form-group">
                <label>First Name</label>
                <input type="text" class="form-control" formControlName="firstName" />
            </div>
            <div class="form-group">
                <label>Surname</label>
                <input type="text" class="form-control" formControlName="surname" />
            </div>
            <div class="form-group">                
                Disabled:{{form.disabled}}<br>
                Status:{{form.status}}
            </div>
        </form>
    `,
})
export class App implements OnInit {  
  public form: FormGroup;

  constructor(private personService: PersonService) {}

  ngOnInit(): void {
    this.form = new FormGroup({     
      firstName: new FormControl(),
      surname: new FormControl(),
    });
  }

  public onFetchPerson() {
    this.personService.fetchPerson().subscribe(() => {
      this.form = new FormGroup({        
        firstName: new FormControl('John'),
        surname: new FormControl('Doe'),
      });
      this.form.disable();
      console.log(this.form);
    });
  }
}

@Injectable({
  providedIn: 'root',
})
export class PersonService {
  constructor(private http: HttpClient) {}

  public fetchPerson = () => this.http.get('https://randomuser.me/api');
}

@NgModule({
    imports: [BrowserModule, HttpClientModule, ReactiveFormsModule],
    declarations: [App],
    bootstrap: [App],
    providers: [
        PersonService
    ]
})
export class AppModule {}

3 回复 | 直到 6 年前

Eduardo Vargas 6 年前

对我来说,如果你只是设置值,而不是传递一个全新的formGroup实例,它就会起作用

 this.personService.fetchPerson().subscribe(() => {
      this.form.setValue({
        firstName:'John',
        surname:'Doe'
      });
      this.form.disable();
      console.log(this.form);
    });

Aniket Avhad 6 年前

你可以用 ChangeDetectorRef 为了你的问题

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class App implements OnInit {
    constructor(private personService: PersonService, readonly cd: ChangeDetectorRef) {}

  public onFetchPerson() {
    this.personService.fetchPerson().subscribe(() => {

      this.form = new FormGroup({
        firstName: new FormControl('John'),
        surname: new FormControl('Doe'),
      });
      this.cd.detectChanges();
      this.form.disable();
      console.log(this.form);
    });
  }
}

shammelburg 6 年前

我会使用FormBuilder,这是一种非常整洁的创建表单和添加验证的方法。

创建表单后,您可以补丁至设置

FormBuilder提供了语法糖,缩短了FormControl、FormGroup或FormArray实例的创建时间。它减少了构建复杂表单所需的样板文件数量。

From angular.io

Plunk here

  import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

  constructor(
    private personService: PersonService, 
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      firstName: [''],
      surname: [''],
    });
  }

  public onFetchPerson() {
    this.personService.fetchPerson().subscribe(() => {
      this.form.patchValue({ firstName: 'John', surname: 'Doe' });
      this.form.disable();
      console.log(this.form);
    });
  }