Angular-如果字段更改则禁用字段

问题描述 投票:0回答:2

我对angular并不陌生,如果多次更改,我的项目需要禁用一个字段(3),但是如果有人可以指导我提出解决方案,我没有发现执行禁用的逻辑非常感谢...

在想要保存它的时候经历了一个保存它的方法,我知道我必须使用该方法,但是我不知道如何将它放在条件中


P.S。我的angular版本是9.1.2

angular
2个回答
1
投票

这里是使用ReactiveForm的示例:

在模板中定义您的输入内容:

<input type="text" [formControl]="formControl">

在组件内部,监听对输入所做的更改,如果操作了3个更改,则将其禁用:

export class AppComponent implements OnInit {
  formControl: FormControl = new FormControl('');
  isDisabled$: Subject<boolean> = new Subject();

  ngOnInit() {
    // listen to changes on the input
    this.formControl.valueChanges.pipe(
      // wait for 500ms if the user is still typing
      debounceTime(500),
      // stop the subscription if 3 changes have been made
      takeUntil(this.isDisabled$),
      // save the number of changes
      scan((acc, arr) => acc += 1 , 0)
    ).subscribe(changes => {
      if (changes > 2) {
      this.isDisabled$.next(true);
      this.formControl.disable();
      }
    });
  }
}

Working example on Stackblitz


0
投票

HTML

<input [disabled]="changedCount >= 3" type="checkbox" (change)="handleChange()"/>

组件

@Component({
  selector: 'app-your-comp',
  templateUrl: './your-comp.component.html',
  styleUrls: ['./your-comp.component.css']
})
export class YourCompComponent implements OnInit {
changeCount: number = 0;
  constructor() { }

 handleChange(){
  this.changeCount++;
 }    

  ngOnInit() {

  }

}
© www.soinside.com 2019 - 2024. All rights reserved.