正文 

当前位置： 首页 > 问答 >

Angular 2 - 自定义表单控件 - 禁用

     2023-02-22     218

关键词：

【中文标题】Angular 2 - 自定义表单控件 - 禁用【英文标题】：Angular 2 - Custom Form Control - Disable 【发布时间】：2017-03-02 23:33:00 【问题描述】：

我使用 ControlValueAccessor 创建了一个自定义控件，该控件由 input[type=text] 和一个日期选择器组成。

当我在模板驱动的表单中使用它时，一切正常。 但是当我使用模型驱动的方法（反应式表单）时，表单控件上的disable() 方法似乎没有任何效果。

是否可以像在模型驱动表单中使用其他所有表单控件一样以编程方式禁用/启用我的自定义控件

编辑

我应该注意，我使用的是 Angular v2.1.0，并且我的方法与 this 几乎相同，因为我一直使用它作为指南。

编辑

这是我的自定义控件：

@Component(
  selector: 'extended-datepicker',
  templateUrl: './extended-datepicker.component.html',
  styleUrls: ['./extended-datepicker.component.scss'],
  providers: [
    
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ExtendedDatepickerComponent),
      multi: true
    
  ]
)
export class ExtendedDatepickerComponent implements OnInit, ControlValueAccessor 
  isDatepickerActive: boolean = false;
  _selectedDate: Date;
  selectedDateString: string = "";
  @Input() disabled: boolean;
  @Input() mask: any;
  @Input() required: boolean;

  @ViewChild('textInput') textInput: ElementRef;

  get selectedDate(): Date 
    return this._selectedDate;
  

  set selectedDate(value: Date) 
    this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    this._selectedDate = value;
  

  propagateChange: Function;

  @ViewChild(DatePickerComponent) datepicker: DatePickerComponent;

  constructor() 
  

  writeValue(value: Date) 
    if (value) 
      this.selectedDate = value;
      this.selectedDateString = moment(value).format(STANDARD_DATE_FORMAT);
    
  

  registerOnTouched(): void 
  

  registerOnChange(fn: Function) 
    this.propagateChange = fn;
  
  // ...

这是控件的模板：

<div class="calendar-wrapper row-small-margin" 
     (clickOutside)="isDatepickerActive = false;">

  <div class="col-xs-10 col-small-padding">
    <div class="input-group">

      <span class="input-group-addon" role="button" (click)="prevDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-left"></i>
      </span>

      <input #textInput [textMask]="mask: mask" 
             [(ngModel)]="selectedDateString" 
             (ngModelChange)="inputChange()"
             class="form-control" [required]="required" 
             [disabled]="disabled" (keyup)="onKeyPressed($event)">

      <span class="input-group-addon" role="button" (click)="nextDay()" 
            *ngIf="selectedDate">
        <i class="fa fa-chevron-right"></i>
      </span>
    </div>

    <div *ngIf="isDatepickerActive" class="datepicker-wrapper">
      <datepicker [(ngModel)]="selectedDate" (ngModelChange)="dateChange()" 
                  [showWeeks]="false" [required]="required"
                  [formatDay]="dd" [formatMonth]="MM" [formatYear]="yyyy" 
                  [disabled]="disabled">
      </datepicker>
    </div>
  </div>

  <div class="col-xs-2 col-small-padding">
    <button class="btn btn-sm btn-datepicker" [disabled]="disabled"
        (click)="toggleDatePicker()" type="button">
      <img src="/assets/img/image.png">
    </button>
  </div>

</div>

这就是我在表单组件中所做的：

this.myForm.controls['pickDate'].valueChanges.subscribe(val => 
  if (!val) 
    this.myForm.controls['date'].disable(); // This line here does nothing
  
);

如何在我的扩展日期选择器中响应 disable() 调用并采取相应措施？

【问题讨论】：

请添加代码 【参考方案1】：

您的组件需要实现在ControlValueAccessor 接口中定义的setDisabledState 函数（参见docs）。

例如（假设已经在构造函数中注入了渲染器）：

setDisabledState(isDisabled: boolean) 
    this.renderer.setElementProperty(this.textInput.nativeElement, 'disabled', isDisabled);
    // disable other components here

【讨论】：

想象一下，我已经查看了该文档大约一千次，但我从未注意到 setDisabledState 方法...非常感谢！

Angular 2 自定义表单输入

】Angular2自定义表单输入【英文标题】：Angular2customforminput【发布时间】：2016-04-2904:28:29【问题描述】：如何创建与原生&lt;input&gt;标签一样的自定义组件？我想让我的自定义表单控件能够支持ngControl、ngForm、[(ngModel)]。据我... 查看详情

Angular2- RC6 自定义表单控件不起作用

】Angular2-RC6自定义表单控件不起作用【英文标题】：Angular2-RC6CustomFormControlsNotworking【发布时间】：2017-01-1710:02:25【问题描述】：我已将Angular2RC5应用程序更新为RC6。我根据Thoughtram的this教程开发了一些自定义表单控件。在RC5之前... 查看详情

如何使用 Angular 重置自定义表单控件

】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情

Angular 反应式表单自定义控件异步验证

】Angular反应式表单自定义控件异步验证【英文标题】：Angularreactiveformcustomcontrolasyncvalidation【发布时间】：2020-04-0608:48:11【问题描述】：更新：异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。诀窍... 查看详情

启用/禁用表单控件触发 valueChanges Angular 2 Forms

】启用/禁用表单控件触发valueChangesAngular2Forms【英文标题】：enable/disableformcontrolfiresvalueChangesAngular2Forms【发布时间】：2017-08-0602:56:36【问题描述】：知道为什么在运行以下代码时我会触发\'firstName\'控件的valueChanges事件吗？letform:... 查看详情

Angular2自定义表单控件防止发射事件

】Angular2自定义表单控件防止发射事件【英文标题】：Angular2customformcontrolpreventemittingevent【发布时间】：2017-06-2423:40:12【问题描述】：在某些情况下，当我更新Angular2表单控件时，我不想触发valueChanges事件（例如，因为更改来自... 查看详情

验证不会传播到 Angular 中的自定义表单控件 ng-select

】验证不会传播到Angular中的自定义表单控件ng-select【英文标题】：ValidationisnotpropagatetoCustomFormControlng-selectinAngular【发布时间】：2020-06-1223:43:55【问题描述】：我在Angular9应用程序中使用带有自定义表单控件的反应式表单。我用... 查看详情

来自 FormGroup 的禁用控件（表单自定义表单控件的一部分）被父级中的 .getRawValue() 排除

】来自FormGroup的禁用控件（表单自定义表单控件的一部分）被父级中的.getRawValue()排除【英文标题】：DisabledcontrolsfromFormGroup(partofformcustomformcontrol)areexcludedby.getRawValue()inparent【发布时间】：2019-06-0715:24:15【问题描述】：有一个实... 查看详情

Angular 2 自定义表单组件：提供 markTouched 方法

】Angular2自定义表单组件：提供markTouched方法【英文标题】：Angular2CustomFormComponent:ProvideamarkTouchedmethod【发布时间】：2017-09-1813:38:24【问题描述】：我有一个实现ControlValueAccessor的自定义表单组件。这个组件有一个内部属性被触及... 查看详情

根据其他表单控件更新 Angular Reactive Form 禁用字段的值

】根据其他表单控件更新AngularReactiveForm禁用字段的值【英文标题】：UpdateValueofAngularReactiveFormdisabledfieldbasedonotherFormControls【发布时间】：2018-08-0319:30:16【问题描述】：我在Angular中使用反应式表单，并且有一个禁用的表单控件，... 查看详情

如何在Angular的自定义控件组件中触摸内部控件？

】如何在Angular的自定义控件组件中触摸内部控件？【英文标题】：HowtotouchinnercontrolincustomcontrolcomponentinAngular?【发布时间】：2021-02-2218:39:12【问题描述】：我有一个带有我自己的自定义控件组件的表单：@Component(selector:"my-app",temp... 查看详情

具有响应式表单的自定义控件

...【发布时间】：2019-11-1503:24:46【问题描述】：我正在使用Angular7，带有反应形式的AngularMaterial控件。我使用带有mat-form-field的AngularMaterial创建了自定义文本(matInputtype="text")、数字(matInputtype="number")、选择(mat 查看详情

Angular 6. 如何在创建的自定义控件中赋予验证状态这个控件？

】Angular6.如何在创建的自定义控件中赋予验证状态这个控件？【英文标题】：Angular6.HowinthecreatedCustomControltogivenValidatorstatethiscontol?【发布时间】：2018-12-2509:51:48【问题描述】：我为表单创建了一个自定义控件。我的控件是这样的... 查看详情

使用自定义验证和动态值的 Angular 表单

】使用自定义验证和动态值的Angular表单【英文标题】：Angularformsusingcustomvalidationandadynamicvalue【发布时间】：2021-04-2501:21:21【问题描述】：我正在尝试创建一个自定义的反应式表单验证，它允许我传递一个数据数组来检查一个字... 查看详情

Angular 11 自定义 ISBN 验证器响应式表单

】Angular11自定义ISBN验证器响应式表单【英文标题】：Angular11CustomISBNValidatorReactiveForms【发布时间】：2022-01-2322:09:59【问题描述】：我正在对ISBN号码进行自定义验证，我已经拥有检查号码并完美运行的功能，可以通过控制台为我... 查看详情

Angular 2 提交时触发表单验证

】Angular2提交时触发表单验证【英文标题】：Angular2TriggerFormValidationonSubmit【发布时间】：2017-03-0601:27:11【问题描述】：我用angular2创建了一个表单并添加了一些自定义验证器。现在我想在用户点击提交按钮时触发表单验证。在到... 查看详情

Angular 3 形成 2 任一条件禁用按钮

】Angular3形成2任一条件禁用按钮【英文标题】：Angular3forms2eitherconditiondisablebutton【发布时间】：2018-06-2007:25:53【问题描述】：在我的Angular项目中，我有3个表单这是结构--form1--form2--form3在我的表单1中有表单2和表单3。如果表单1无... 查看详情

在提交 Angular4 时触发表单验证

】在提交Angular4时触发表单验证【英文标题】：TriggerformvalidationonSubmitAngular4【发布时间】：2018-01-0921:43:40【问题描述】：我使用Angular和ionic设计了一个模板驱动的表单，它具有一些自定义（onblur）验证。现在我喜欢在点击提交按... 查看详情