Angular 4反应形式禁用输入字段无法正常工作

时间:2017-09-18 18:27:50

标签: javascript angular typescript

我有一个根组件和一个子模态组件,每当我从根组件单击打开模式按钮时,根据某个值我要么禁用或启用被动形式的特定字段。用我的方法看起来我无法在UI中禁用输入框。

注意:我在这里使用ngPrime模态组件

root.component.html:

<button class="btn btn-sm btn-outline-primary" (click)="rateLimitingCRUDModal.openModal()">
  <span class="fa fa-plus"></span> Create Rate Limiter
</button>
<button class="btn btn-sm btn-outline-primary" (click)="rateLimitingCRUDModal.openModal(rateLimiter)" tooltip="Edit" container="body">
  <span class="fa fa-pencil"></span>
</button>

<app-rate-limiting-crud #rateLimitingCRUDModal (onSubmit)="getAllAPIThresholds()"></app-rate-limiting-crud>

modal.component.ts:

@Component({
  selector: 'app-rate-limiting-crud',
  templateUrl: './rate-limiting-crud.component.html',
  styleUrls: ['./rate-limiting-crud.component.scss']
})
export class RateLimitingCrudComponent {
  constructor(private formBuilder: FormBuilder,
              private rateLimiterSvc: RateLimitingService,
              private toaster: ToastrService) {
    this.createForm();
  }

  public openModal(rateLimiter?: RateLimiter): void {
    this.isCreateRateLimiter = !rateLimiter;
    this.rateLimiter = rateLimiter;
    this.createForm(rateLimiter);
    this.rateLimitingCRUDModal.show();
  }

  createForm(rateLimiter?: RateLimiter): void {
    this.rateLimiterCRUDForm = this.formBuilder.group({
      account: [rateLimiter ? rateLimiter.account : null, Validators.required],
      threshold: [rateLimiter ? rateLimiter.threshold : null, Validators.required],
      granularity: [rateLimiter ? rateLimiter.granularity : '', Validators.required]
    });

    this.isCreateRateLimiter ? this.rateLimiterCRUDForm.get('account').enable() : this.rateLimiterCRUDForm.get('account').disable();
    // Observable.timer(0).subscribe(() => {
    //     this.isCreateRateLimiter ? this.rateLimiterCRUDForm.get('account').enable() : this.rateLimiterCRUDForm.get('account').disable();
    // });
  }
}

这一行 this.isCreateRateLimiter ? this.rateLimiterCRUDForm.get('account').enable() : this.rateLimiterCRUDForm.get('account').disable();开始工作。 注释行适合我。 不确定,我在这里做错了什么。任何帮助表示赞赏。

0 个答案:

没有答案