'You provided an invalid object where a stream was expected. You can provide an Observable, Promise ReadableStream, Array, AsyncIterable, or Iterable

enter image description hereenter image description hereUsing the command "npm i [email protected]" to change the rxjs from 7.4.0 to 6.4.0 does not the solve the problem

This is the ts file

  get errorMessageForPassword(): string {
    const form: FormControl = (this.thirdFormGroup.get('passWord') as FormControl);
    return form.hasError('required') ?
      'Password is required' :
      form.hasError('minlength') ?
        'Password must be at least 6 characters' : '';
  }

This the html file

         <div class="col-md form-group">
                        <mat-form-field appearance="standard">
                            <mat-label>Password</mat-label>
                            <input matInput [type]="hide ? 'password' : 'text'" placeholder="**"
                                formControlName="passWord"  [(ngModel)]="testUser.passWord" id="passWord"
                                name="passWord" >
                            <button mat-icon-button matSuffix (click)="hide = !hide">
                                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                            </button>
                            <mat-error>{{ errorMessageForPassword }}</mat-error>
                        </mat-form-field>
                    </div>
typescriptrxjsstreamobservableangular13


Solution 1:[1]

Can it be that you forgot to add parantheses to

{{errorMessageForPassword()}}

(I checked the example here: https://material.angular.io/components/form-field/examples#form-field-error)

Solution 2:[2]

So I fixed the issue. The problem was how I handled the property declaration of password in the formGroup validator function.
The first code snippet is how I handled the validators which was in the wrong format when using formbuilder.

  passWord: ['', Validators.required, Validators.minLength(6)],

The second code snippet is the correct format when using formbuilder

 passWord: new FormControl('', [Validators.required, Validators.minLength(6)]),

Screenshot of code snippet https://prnt.sc/imbgwE7AlRTr

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 daflodedeing
Solution 2 Luigi

Related Questions