Biểu mẫu phản ứng - thuộc tính bị vô hiệu hóa

Tôi đang cố gắng sử dụng disabledthuộc tính từ a formControl. Khi tôi đặt nó vào mẫu, nó hoạt động:

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

Nhưng trình duyệt cảnh báo tôi:

Có vẻ như bạn đang sử dụng thuộc tính bị vô hiệu hóa với chỉ thị biểu mẫu phản ứng. Nếu bạn đặt bị vô hiệu hóa thành true khi thiết lập điều khiển này trong lớp thành phần của mình, thì thuộc tính bị vô hiệu hóa sẽ thực sự được đặt trong DOM cho bạn. Chúng tôi khuyên bạn nên sử dụng phương pháp này để tránh lỗi 'đã thay đổi sau khi đã kiểm tra'.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Vì vậy, tôi đặt nó vào FormControlvà xóa khỏi mẫu:

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

Nhưng nó không hoạt động (nó không vô hiệu hóa input). Vấn đề là gì?

Tôi đã và đang sử dụng [attr.disabled]vì tôi vẫn thích mẫu này được điều khiển hơn là enable () / disable () có lập trình vì nó là IMO vượt trội.

Thay đổi

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

đến

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

Nếu bạn đang sử dụng vật liệu mới hơn, hãy thay đổi md-inputthành mat-input.

Bạn có thể bật / tắt điều khiển biểu mẫu bằng cách sử dụng các phương pháp sau:

control.disable () hoặc control.enable ()

Nếu điều đó không hiệu quả với bạn, bạn có thể sử dụng lệnh

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

Sau đó, bạn có thể sử dụng nó như thế này

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

Kỹ thuật này được mô tả ở đây:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Hy vọng nó giúp

Tôi thấy rằng tôi cần phải có một giá trị mặc định, ngay cả khi đó là một chuỗi trống để nó hoạt động. Vì vậy, điều này:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

... phải trở thành cái này:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

Xem câu hỏi của tôi (mà tôi không tin là trùng lặp): Chuyển 'bị vô hiệu hóa' ở đối tượng trạng thái biểu mẫu đến hàm tạo FormControl không hoạt động

Trong trường hợp của tôi với Angular 8 . Tôi muốn bật / tắt đầu vào tùy thuộc vào điều kiện.

[attr.disabled] không làm việc cho tôi vì vậy đây là giải pháp của tôi.

Tôi đã xóa [attr.disabled]khỏi HTML và trong hàm thành phần đã thực hiện kiểm tra này:

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Khởi tạo (thành phần) bằng cách sử dụng:

public selector = new FormControl({value: '', disabled: true});

Sau đó, thay vì sử dụng (mẫu):

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Chỉ cần xóa thuộc tính bị vô hiệu hóa:

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

Và khi bạn có các mục để hiển thị, hãy khởi chạy (trong thành phần): this.selector.enable();

Chỉ những người đang sử dụng biểu mẫu phản ứng: Đối với các phần tử HTML gốc [attr.disabled] sẽ hoạt động nhưng đối với các phần tử material, chúng tôi cần vô hiệu hóa phần tử đó một cách tự động.

this.form.get('controlname').disable();

Nếu không, nó sẽ hiển thị trong thông báo cảnh báo bảng điều khiển.

Tôi đã thử những điều này trong góc 7. Nó hoạt động thành công.

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

this.form.disable()
this.form.enable()

Đối với một điều khiển biểu mẫu làm cho vô hiệu hóa

this.form.get('first').disable()
this.form.get('first').enable()

Hoặc phương pháp thiết lập ban đầu.

first: new FormControl({disabled: true}, Validators.required)

Sử dụng [attr.disabled] thay vì [đã tắt], trong trường hợp của tôi, nó hoạt động tốt

thêm disable = "true" vào trường html Ví dụ: vô hiệu hóa

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

Vẻ đẹp của biểu mẫu phản ứng là bạn có thể nắm bắt sự kiện thay đổi giá trị của bất kỳ phần tử đầu vào nào rất dễ dàng và đồng thời bạn có thể thay đổi giá trị / trạng thái của chúng. Vì vậy, đây là một cách khác để giải quyết vấn đề của bạn bằng cách sử dụng enable disable.

Đây là giải pháp hoàn chỉnh trên stackblitz .

Việc vô hiệu hóa các trường biểu mẫu mat được miễn nếu bạn đang sử dụng xác thực biểu mẫu, vì vậy hãy đảm bảo rằng trường biểu mẫu của bạn không có bất kỳ xác thực nào như (validators.required), điều này phù hợp với tôi. cho người yêu cũ:

editUserPhone: new FormControl ({value: '', vô hiệu hóa: true})

điều này làm cho số điện thoại của người dùng không thể chỉnh sửa được.

Đây là giải pháp của tôi:

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

trong Angular-9 nếu bạn muốn tắt / bật trên nút bấm vào đây là một giải pháp đơn giản nếu bạn đang sử dụng các biểu mẫu phản ứng.

xác định một hàm trong tệp component.ts

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

Gọi nó từ component.html của bạn

ví dụ

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Khi bạn tạo điều khiển Biểu mẫu mới, hãy sử dụng tiếp theo:

variable: FormControl = new FormControl({value: '', disabled: true});

Nếu bạn muốn thay đổi hoạt động, hãy sử dụng tiếp theo:

this.variable.enable() 

hoặc là

this.variable.disable()

thêm thuộc tính name vào md-input của bạn. nếu nó không giải quyết được vấn đề, vui lòng đăng mẫu của bạn

Cách cuối cùng để làm điều này.

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}