不填寫 model 並將其設置為 angular8

Question

你好

我有這個 model：

export interface SiteSetting {
    postSetting: PostSetting;
}

export interface PostSetting {
    showDataRecordAfterSomeDay: number;
}

我需要在組件中填寫 model 並將添加集添加到表單值。

   postSettingAddFormGroup: FormGroup;
  postSettingModel: SiteSetting;

  constructor(private formBuilder: FormBuilder, private postsettingService: PostService, private alertService: AlertService, private route: Router) {
    this.postSettingModel = {} as SiteSetting;
    this.cachedSetting();
  }

  ngOnInit(): void {
    this.intialForm();
  }


  ngAfterViewInit(): void {
  }


  intialForm(): void {
    this.postSettingAddFormGroup = this.formBuilder.group({
      showDataRecordAfterSomeDay: ['', Validators.compose([Validators.required, Validators.minLength(0), Validators.maxLength(365)])]
    });
  }

  cachedSetting(): void {
    this.postsettingService.getPostSetting().subscribe(data => {
      this.postSettingModel.postSettingsModel = data
    })
  }

我使用此代碼，但不是postSettingModel 。

有什么問題？ 我該如何解決這個 model ？？？

Answer 1

我可以看到的是，您永遠不會將表單與獲取的數據聯系起來。 嘗試這樣的事情：

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  postSettingAddFormGroup: FormGroup;

  constructor(private formBuilder: FormBuilder, private postSettingService: BtwService) {
    this.postSettingAddFormGroup = this.formBuilder.group({
      showDataRecordAfterSomeDay: new FormControl(null, Validators.compose([Validators.required, Validators.minLength(0), Validators.maxLength(365)]))
    });
  }

  ngOnInit() {
    this.postSettingService.getPostSetting().subscribe(data => {
      this.postSettingAddFormGroup.patchValue({
        showDataRecordAfterSomeDay: data.showDataRecordAfterSomeDay
      });
    });
  }
}

首先，移動您在構造函數中創建的表單。

“showDataRecordAfterSomeDay”是一個數字，因此您必須將其初始化為 null 或 0 而不是 ''。

現在，要使用您的數據更新您的表單，您可以使用“PatchValue”。 這就是在 ngOnInit 中發生的事情。

在您的 HTML 中：

<form [formGroup]="postSettingAddFormGroup">
  <input type="text" formControlName="showDataRecordAfterSomeDay">
</form>

在 PostSettingService 中，我假設您正在返回 PostSetting？ 所以：

getPostSetting(): Observable<PostSetting> {
    return of({showDataRecordAfterSomeDay: 10});
}