我对angular并不陌生,如果多次更改,我的项目需要禁用一个字段(3),但是如果有人可以指导我提出解决方案,我没有发现执行禁用的逻辑非常感谢...
在想要保存它的时候经历了一个保存它的方法,我知道我必须使用该方法,但是我不知道如何将它放在条件中
P.S。我的angular版本是9.1.2
这里是使用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();
}
});
}
}
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() {
}
}