Tidak perlu melanggan Observable, cara penting untuk mengedit data bentuk reaktif dalam Angular

Question

Berikut ialah proses yang saya gunakan untuk melanggan dan mengemas kini borang reaktif berdasarkan data yang boleh diperhatikan.

Mungkin ada cara untuk menyelesaikan masalah tanpa melanggan yang boleh diperhatikan dan mengubah nilai.

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" />
      <input formControlName="email" />
    </form>
  `,
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private ds: DataService) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: '',
      email: '',
    });

    ds.data$.subscribe((data) => {
      this.myForm.setValue({
        name: data.name,
        email: data.email,
      });
    });
  }


}

Answer 1

Lazimnya, satu cara untuk menghapuskan langganan adalah dengan menggunakan paip tak segerak dalam pembungkus

@Component({
  template: `<app-user-form-component *ngIf="user$ | async as user"  [user]="user"/>`,
  // closed tag is a new feature of angular
  selector: 'app-update-user-form-container'
}) 
class UpdateUserFormContainer {
  user$ = inject(DataService).data$;
}

Borang itu sendiri boleh mengendalikan kemas kini pengguna di dalam NgOnInit atau NgOnChanges (jika berkemungkinan terdapat berbilang kemas kini dan menetapkan nilai borang adalah penting dalam kes ini)

export class MyComponent implements OnInit {
  myForm = inject(NonNullableFormBuilder).group({
     name: '',
     email: '',
  }); // this way form is not just FormGroup but the type is inferred from fields
  // i.e. this.myForm.getRawValue() would return you {name: string, email: string};
  @Input({required: true}) user1: User; // required input is new feature of angular
  
  ngOnChanges(changes: SimpleChanges) {
    if('user' in changes) {
      this.myForm.setValue({
       name: this.user.name,
       email: this.user.email,
     })
    }
  }
}

Nota: Beberapa ciri Sudut yang sangat canggih digunakan dalam contoh ini. Anda boleh mengikut corak yang sama, tetapi anda tidak semestinya perlu menggunakan setiap ciri