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,
});
});
}
} 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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