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

如果我将禁用调用置于甚至1毫秒的setTimeout内，则可以正常工作。（整个表格被禁用）

如果将代码放在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();
      });
}

如何使用表单的其余部分禁用无线电输入表单控件？

1 个答案: