this.formGroup.get('title')!.statusChanges

  .pipe(

    startWith(this.formGroup.get('title')!.status),

    distinctUntilChanged(),

    skip(1)

  )

  .subscribe(v => {

    console.log('status change', v);

  });

加 distinct 就可以了, 如果你不希望第一次触发, 那么就 skip 1

const formControl = new FormControl('dada');

setTimeout(() => {

  formControl.valueChanges.subscribe(v => console.log(v)); // 不触发

}, 1000);

const formControl = new FormControl('dada');

const o = formControl.valueChanges.pipe(startWith(formControl.value));

setTimeout(() => {

  o.subscribe(v => console.log(v)); // dada

}, 1000);

const formControl = new FormControl('dada');

const o = formControl.valueChanges.pipe(startWith(formControl.value));

formControl.setValue('tata');

setTimeout(() => {

  o.subscribe(v => console.log(v)); // dada

}, 1000);

const formControl = new FormControl('dada');

// const o = formControl.valueChanges.pipe(startWith(formControl.value));

const o = defer(() => {

  return formControl.valueChanges.pipe(startWith(formControl.value));

});

formControl.setValue('tata');

setTimeout(() => {

  o.subscribe(v => console.log(v)); // tata

}, 1000);

registerOnChange(fn: (_: number | null) => void): void {

  this.onChange = (e: Event) => {

    const input = e.target as HTMLInputElement;

    let value: number | null;

    if (input.validity.badInput) {

      value = NaN;

    } else if (input.value === '') {

      value = null;

    } else {

      value = parseFloat(input.value);

    }

    console.log(value);

    fn(value);

  };

}

@Directive({

  selector:

      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',

  // TODO: vsavkin replace the above selector with the one below it once

  // https://github.com/angular/angular/issues/3011 is implemented

  // selector: '[ngModel],[formControl],[formControlName]',

  host: {

    '(input)': '$any(this)._handleInput($event.target.value)',

    '(blur)': 'onTouched()',

    '(compositionstart)': '$any(this)._compositionStart()',

    '(compositionend)': '$any(this)._compositionEnd($event.target.value)'

  },

  providers: [DEFAULT_VALUE_ACCESSOR]

})

export class DefaultValueAccessor implements ControlValueAccessor {

const BUILTIN_ACCESSORS = [

  CheckboxControlValueAccessor,

  RangeValueAccessor,

  NumberValueAccessor,

  SelectControlValueAccessor,

  SelectMultipleControlValueAccessor,

  RadioControlValueAccessor,

];

asyncValidators: (formControl: FormControl): Observable<ValidationErrors | null> => {

  return of([]).pipe(delay(400), switchMap(() => {

    return from(this.customerService.checkCustomerNameUniqueAsync({ name: formControl.value })).pipe(map((isDuplicate) => {

        return isDuplicate ? { 'unique': true } : null;

    }), tap(() => this.cdr.markForCheck()));

  }));

ngOnInit() {

  this.formGroup = this.formBuilder.group({

    name: [''],

    email: ['']

  });

  this.formGroup.valueChanges.subscribe((value: { name: string, email: string }) => {

    if (value.name !== '' || value.email !== '') {

      this.formGroup.get('name').setValidators(Validators.required);

      this.formGroup.get('email').setValidators(Validators.required);

      // this.formGroup.updateValueAndValidity({ emitEvent: false }); // 调用 formGroup 是不足够的, 它并不会去检查 child control

      this.formGroup.get('name').updateValueAndValidity({ emitEvent: false }); // 这个就有效果, 但是记得要放 emitEvent false, 不然就死循环了

      // 最后.. 这里不需要调用 ChangeDetectorRef.markForCheck() view 也会更新

    }

  });

}

let fc = new FormControl('');

fc.valueChanges.subscribe(v => console.log(v));

fc.setValue(''); // '' to '' 没有必要触发

fc.setValue('a'); // '' to a 触发 

可是结果 2 个都触发了.

那这样试试看 :

fc.valueChanges.pipe(distinctUntilChanged()).subscribe(v => console.log(v));

结果还是一样.

问题在哪里呢 ？

首先 ng 的 formControl 看上去想是 BehaviorSubject 因为它有 default 值, 但是行为却像是 Subject. 因为

let fc = new FormControl('dada');

fc.valueChanges.subscribe(v => console.log(v)); //并没有触发

虽然之前的代码问题出在, 没有初始值, 所以 distinctUntilChanged 就发挥不了作用了

我们需要用 startWith 告诉它初始值

let fc = new FormControl('dada');

fc.valueChanges.pipe(startWith('dada'), distinctUntilChanged(), skip(1)).subscribe(v => console.log(v));

fc.setValue('dada'); // 不触发

fc.setValue('dada1'); //触发了

startWith 会马上输入一个值, 然后流入 distinct, distinct 会把值对比上一个(目前没有上一个), 然后记入这一个, 在把值流入 skip(1), 因为我们不要触发初始值, 所以使用了 skip, 如果没有 skip 这时 subscribe 会触发. (startWith 会触发 subscribe)

这样之后的值流入(不经过 startWith 了， startWith 只用一次罢了), distinc 就会和初始值对比就是我们要的结果了.

如果要在加上一个 debounceTime, 我们必须加在最 startWith 之前.

pipe(debounceTime(200), startWith(''), distinctUntilChanged(), skip(1))

一旦 subscribe startWith 输入值 -> distinct -> skip

然后 setValue -> debounce -> distinc -> 触发 ( startWith 只在第一次有用, skip(1) 也是因为已经 skip 掉第一次了)

let ff = new FormGroup({

    name : new FormControl('')

});

ff.get('name')!.valueChanges.subscribe(v => {

  console.log(v); // 'dada'

  console.log(ff.value); // { name : '' } 这时还没有更新到哦 

  console.log(ff.getRawValue())  // { name : 'dada' }

});

ff.get('name')!.setValue('dada');

console.log(ff.value); // { name : 'dada' }

this.formControl.setValidators(null);

this.formControl.updateValueAndValidity();

 <form [formGroup]="form">

  <div formGroupName="obj">

    <input formControlName="name" type="text">

    <input sURLTitle="name" formControlName="URLTitle" type="text">

  </div>

</form> 

<form [formGroup]="form">

  <div [formGroup]="form.get('obj')">

    <input [formControl]="form.get('obj.name')" type="text">

    <input [sURLTitle]="form.get('obj.name')" [formControl]="form.get('obj.URLTitle')" type="text">

  </div>

</form>

@Directive({

  selector: '[sURLTitle]'

})

export class URLTitleDirective implements OnInit, OnDestroy {

  constructor(

    // 注意 : 不雅直接注入 FormGroupDirective | FormGroupName, 注入 ControlContainer 才对.

    // @Optional() private formGroupDirective: FormGroupDirective,

    // @Optional() private formGroupName: FormGroupName,

    private closestControl: ControlContainer, // 通过抽象的 ControlContainer 可以获取到上一层 formGroup

    @Optional() private formControlDirective: FormControlDirective,

    @Optional() private FormControlName: FormControlName,

  ) { }

  @Input('sURLTitle')

  URLTitle: string | FormControl

  private sub: ISubscription

  ngOnInit() {

    let watchControl = (typeof (this.URLTitle) === 'string') ? this.closestControl.control.get(this.URLTitle) as FormControl : this.URLTitle;

    let sub = watchControl.valueChanges.subscribe(v => {

      (this.formControlDirective || this.FormControlName).control.setValue(s.toURLTitle(v));

    });

  }

  ngOnDestroy() {

    this.sub.unsubscribe();

  }

}

<form [formGroup]="form" #formComponent >

    <button type="button" ></button>

    <button type="submit" ></button>

    <button type="reset" ></button>

</form>

<form novalidate #form="ngForm" (ngSubmit)="submit(form)">

</form>

<input type="text" placeholder="name"

        [(ngModel)]="person.name" name="name" #name="ngModel" required minlength="5" maxlength="10" />

<p>name ok : {{ name.valid }}</p>  

<fieldset ngModelGroup="address">

    <legend>Address</legend>

    <div>

        Street: <input type="text" [(ngModel)]="person.address.country" name="country" #country="ngModel" required />

    </div>

    <div>country ok : {{ country.valid }}</div>

</fieldset>

<div>

    <div *ngFor="let data of person.datas; let i=index;">

        <div ngModelGroup="{{ 'datas['+ i +'].data' }}">

            <input type="text" [(ngModel)]="data.key" name="key" #key="ngModel" required />

        </div>

    </div>

</div>  

@Component({

    selector: "my-input",

    template: `

        <input type="text" [(ngModel)]="value"  />

    `,

    providers: [{

        provide: NG_VALUE_ACCESSOR,

        useExisting: forwardRef(() => MyInputComponent),

        multi: true

    }]

})

export class MyInputComponent implements OnInit, ControlValueAccessor {}

//outside to inside

writeValue(outsideValue: any): void {

    this._value = outsideValue;

};

//inside to outside

//注册一个方法, 当 inside value updated then need call it : fn(newValue)

registerOnChange(fn: (newValue : any) => void): void {

    this.publichValue = fn;

}

//inside to outside

registerOnTouched(fn: any): void {

    this.publichTouched = fn;

}  

<my-input [(ngModel)]="person.like" name="like" email #like="ngModel" ></my-input>

value : {{ like.value }}

writeValue(value: any): void {

    this.formControl.setValue(value,{ emitEvent : false });

};

class MyValidators {

    static email(value: string): ValidatorFn {

        return function (c: AbstractControl) {

            return (c.value == value) ? null : { "email": false };

        };

    }

}

this.registerForm = this.formBuilder.group({

    firstname: ['', MyValidators.email("abc")]

}); 

export class AppComponent {

    constructor(private formBuilder: FormBuilder) { console.clear(); }

    registerForm: FormGroup;

    ngOnInit() {

        this.registerForm = this.formBuilder.group({

            firstname: ['', Validators.required],

            address: this.formBuilder.group({

                text : ['']

            }),

            array: this.formBuilder.array([this.formBuilder.group({

                abc : ['']

            })], Validators.required)

        });

    }

}

<form [formGroup]="registerForm">

    <input type="text" formControlName="firstname"/>

    <fieldset formGroupName="address">

        <input type="text" formControlName="text">

    </fieldset>

    <div formArrayName="array">

            <div *ngFor="let obj of registerForm.controls.array.controls; let i=index">

            <fieldset [formGroupName]="i">

                <input type="text" formControlName="abc">

            </fieldset>

            </div>

    </div>

</form> 

static async(): AsyncValidatorFn {

    let timer : NodeJS.Timer;

    return (control: AbstractControl) => {

        return new Promise((resolve, reject) => {

            clearTimeout(timer);

            timer = setTimeout(() => {

                console.log("value is " + control.value);

                console.log("ajaxing");

                let isOk = control.value == "keatkeat";
　　　　　　　　  //假设是一个 ajax 啦

                setTimeout(() => {

                    if (isOk) {

                        return resolve(null);

                    }

                    else {

                        resolve({

                            sync: true

                        });

                    }

                }, 5000);

            }, 300);

        });

    };

}

this.form = this.formBuilder.group({

    name: ["abcde", MyValidators.sync(), MyValidators.async()]

});

this.form.controls["name"].markAsPending(); //async valid 时会是 pending 状态, 然后 setErrors 会自动把 pending set to false 哦

this.form.controls["name"].setErrors({ required : true });

this.form.controls["name"].setErrors(null); // null 表示 valid 了

this.form.controls["name"].markAsTouched();

this.form.controls['name'].updateValueAndValidity(); //trigger 验证 (比如做 confirmPassword match 的时候用到)

this.form.controls['name'].root.get("age"); //获取 sibling 属性, 验证的时候经常用到, 还支持 path 哦 .get("address.text")

this.form.controls["confirmPassword"].valueChanges.subscribe(v => v); //监听任何变化