如何禁用表單其餘部分的無線電輸入表單控件？

Question

當我在我的組件的ngOnInit函數內調用this.employeeForm.disable（）時，我的所有表單控件都被禁用，除了reminder_email，單選按鈕控件。如果我將禁用調用放在一個甚至1毫秒的setTimeout中，它就可以工作。 （整個表單處於禁用狀態）我甚至可以通過在頁面上的某個位置放置點擊處理程序來使其處於工作狀態，以便在啓用和禁用之間切換控件。我可以申請使用它的許多黑客行爲，但我寧願以正確的方式做到這一點。如果您需要更多信息，請在評論中提問。

component.ts

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { CompanyService } from '../../../shared/services/company.service'; 
import { Employee } from '../../../shared/classes/employee'; 
import 'rxjs/add/operator/takeUntil'; 
import { Subject } from 'rxjs/Subject'; 

@Component({ 
    selector: 'app-employee-detail', 
    templateUrl: './employee-detail.component.html', 
    styleUrls: ['./employee-detail.component.css'] 
}) 
export class EmployeeDetailComponent implements OnInit { 

    packages: any = []; 
    employee: Employee; 
    validationMessages = this.companyService.validationMessages; 
    formErrors = this.companyService.formErrors; 
    roles = this.companyService.roles; 
    employeeForm: FormGroup; 
    submitted = false; 
    active = false; 

    constructor(private route: ActivatedRoute, public companyService: CompanyService, private fb: FormBuilder) { } 

    ngOnInit() { 

    const employeeId = this.route.snapshot.params.id; 

    this.companyService.getEmployee(employeeId) 
     .subscribe(data => { 
     this.employee = data; 
     this.buildForm(); 
     this.active = true; 
     this.employeeForm.disable(); 
     }); 

    } 

    buildForm(): void { 
    this.employeeForm = this.fb.group({ 
     'firstname': [this.employee.firstname, [ 
     Validators.required, 
     Validators.minLength(2), 
     Validators.maxLength(24) 
     ] 
     ], 
     'lastname': [this.employee.lastname, [ 
     Validators.required, 
     Validators.minLength(2), 
     Validators.maxLength(24) 
     ] 
     ], 
     'email': [this.employee.email, [ 
     Validators.required, 
     Validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) 
     ] 
     ], 
     'date_hired': [this.employee.date_hired, [ 
     Validators.required, 
     ] 
     ], 
     'title': [this.employee.title, [ 
     Validators.required, 
     Validators.minLength, 
     Validators.maxLength 
     ] 
     ], 
     'role': [this.employee.role, [ 
     Validators.required, 
     ] 
     ], 
     'team': [this.employee.team, [ 

     ] 
     ], 
     'training_package': [this.employee.training_package, [ 
     Validators.required, 
     ] 
     ], 
     'reminder_email': [this.employee.reminder_email, [ 
     Validators.required, 
     ] 
     ], 
    }); 
}; 

    saveEmployee() { 
    // save employee 
    } 
} 

HTML

<form [formGroup]="employeeForm" *ngIf="active" (ngSubmit)="saveEmployee()"> 

      <div class="form-group"> 
       <label for="firstname">First Name:</label> 
       <input type="text" class="form-control" formControlName="firstname" required> 
       <div *ngIf="formErrors.firstname" class="alert alert-danger">{{ formErrors.firstname }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="lastname">Last Name:</label> 
       <input type="text" class="form-control" formControlName="lastname" required> 
       <div *ngIf="formErrors.lastname" class="alert alert-danger">{{ formErrors.lastname }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="email">Email:</label> 
       <input type="email" class="form-control" formControlName="email" required> 
       <div *ngIf="formErrors.email" class="alert alert-danger">{{ formErrors.email }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="dateHired">Hire Date:</label> 
       <input type="date" class="form-control" formControlName="date_hired" required> 
       <div *ngIf="formErrors.date_hired" class="alert alert-danger">{{ formErrors.date_hired }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="title">Title:</label> 
       <input type="text" class="form-control" formControlName="title" required> 
       <div *ngIf="formErrors.title" class="alert alert-danger">{{ formErrors.title }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="role">Role:</label> 
       <select class="form-control pointer" formControlName="role" required> 
      <option *ngFor="let role of roles" [selected]="employee.role.name" [ngValue]="role.value">{{ role.title }}</option> 
      </select> 
       <div *ngIf="formErrors.title" class="alert alert-danger">{{ formErrors.title }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="team">Team:</label> 
       <input type="text" class="form-control" formControlName="team" [value]="employee.team.name"> 
       <div *ngIf="formErrors.team" class="alert alert-danger">{{ formErrors.team }}</div> 
      </div> 

      <div class="form-group"> 
       <label for="package">Training Package:</label> 
       <select class="form-control pointer" formControlName="training_package" required> 
      <option *ngFor="let package of packages" [selected]="employee.training_package.name" [ngValue]="package.id">{{ package.name }}</option> 
      </select> 
       <div *ngIf="formErrors.package" class="alert alert-danger">{{ formErrors.title }}</div> 
      </div> 

      <div class="form-group"> 
       <label>Send Reminder Emails?</label> 
       <br> 
       <label for="reminder_email">Yes</label> 
       <input [checked]="employee.reminder_email === true" formControlName="reminder_email" type="radio" [value]=true [(ngModel)]="employee.reminder_email"> 
       <br> 
       <label for="reminder_email">No</label> 
       <input [checked]="employee.reminder_email === false" formControlName="reminder_email" type="radio" [value]=false [(ngModel)]="employee.reminder_email"> 
       <br> 
      </div> 

      <button type="submit" class="btn btn-primary">Save Changes</button> 

      </form> 

Answer 1

If I place the disable call inside of a setTimeout of even 1 millisecond it works. (entire form is disabled)

如果你把一個ngAfterViewInit裏面的代碼的形式建立之後就應該調用。

ngAfterViewInit(){ 
    const employeeId = this.route.snapshot.params.id; 

    this.companyService.getEmployee(employeeId) 
     .subscribe(data => { 
     this.employee = data; 
     this.buildForm(); 
     this.active = true; 
     this.employeeForm.disable(); 
     }); 
}