angular - Angular Reactive表单如何防止触发重复更改

Question

我有一个带有一个输入字段的简单反应式表单。

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void {
    const updateOnObj = { updateOn: 'change' };
    this.mainForm = this.formBuilder.group({
      onechar: [ null, Validators.minLength(1) ],
    }, updateOnObj);    
    this.mainForm.valueChanges.subscribe((value: string) => { 
     console.log(`Value changed ${value}.`);
    });
}

<input id="char"class="form-control" type="text" formControlName="onechar" tabindex="1" 
placeholder="Type a char">

当我输入一个字符时，例如。'A' 触发值更改的更改检测是可以的。但是，当我再次键入字符“A”而不是之前键入的内容时，我选择了键入的字符“A”并将其替换为新的“A”字符，它也会触发更改。再次输入相同的字符时，如何防止它？

Answer 1

您可以使用不同的运算符：

this.mainForm.valueChanges.pipe(distinct())subscribe((value: string) => { 
     console.log(`Value changed ${value}.`);
    });