無需訂閱Observable，在Angular中以命令式的方式編輯響應式表單資料的方法

Question

以下是我一直在使用的訂閱和根據可觀察資料更新響應式表單的過程。

也許有一種方法可以在不訂閱可觀察物件和更改值的情況下解決問題。

@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

通常，消除訂閱的一種方法是在包裝器中使用非同步管道

@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$;
}

表單本身可以在NgOnInit或NgOnChanges內處理使用者更新（如果可能有多個更新，並且在這種情況下設定表單值很重要）

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,
     })
    }
  }
}

注意：此範例中使用了一些非常前沿的Angular功能。可以按照相同的模式進行操作，但不一定需要使用每個功能