Using Angular 8, remember to not only create a model but also to properly set it

Question

Using Angular 8, remember to not only create a model but also to properly set it

hello

Here is a sample of the model I am working with:

export interface SiteSetting {
    postSetting: PostSetting;
}

export interface PostSetting {
    showDataRecordAfterSomeDay: number;
}

I am trying to populate this model in a component and set it as the form value.

   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.initializeForm();
  }


  ngAfterViewInit(): void {
  }


  initializeForm(): 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
    })
  }

I have implemented this code but encountered an issue with postSettingModel.

What could be causing this problem? How can I troubleshoot this model?

javascript angular typescript

Answer 1

Answer №1

It seems like the issue lies in not properly connecting your form with the fetched data. Consider implementing the following solution:

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

Make sure to create your form within the constructor.

The "showDataRecordAfterSomeDay" is a number, so initialize it as null or 0, instead of ''.

To update your form with the fetched data, utilize "PatchValue" as shown in the ngOnInit function.

In your HTML file:

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

If the PostSettingService returns a PostSetting object, then ensure your method looks like this:

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

Answer 2

It seems like the issue lies in not properly connecting your form with the fetched data. Consider implementing the following solution:

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

Make sure to create your form within the constructor.

The "showDataRecordAfterSomeDay" is a number, so initialize it as null or 0, instead of ''.

To update your form with the fetched data, utilize "PatchValue" as shown in the ngOnInit function.

In your HTML file:

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

If the PostSettingService returns a PostSetting object, then ensure your method looks like this:

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

Using Angular 8, remember to not only create a model but also to properly set it

Answer №1

Similar questions

Hide the dropdown menu when the user clicks anywhere else on the screen

submitting a form including a file through ajax communication

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

The 'Image' component does not have a propType defined for the native prop 'RCTImageView.overlayColor' with a native type of 'number'

What is the process for linking to a backend on a distinct port in Next.js?

How to convert DateTime format from database to input type='datetime' using PHP

Initial Search Function in a MEAN Stack Site

Having trouble storing data accurately in local storage using React

Rotate a sphere in three.js in order to align the mapped image of the globe with the GeoJSON data that is displayed in the same three

Prepared SQL Statement in NodeJS for MSSQL using WHERE IN clause

Implementing a feature in React where the active class is applied only to the next element upon clicking

Setting up ReactJS and TypeScript in a fresh MVC5 project from scratch

Why does the 401 error continue to persist while attempting to log in using Google Identity service on my Laravel application?

Displaying a component after retrieving a value from AsyncStorage in a React Native application

My goal is to develop a custom forEach function that retrieves a substring from each element in an array

Avoid triggering the API with rapid successive clicks

Using Vue to showcase the result of a form submission on a separate page

Generate an image on Canvas using a URL link

Removing a dynamic TypeScript object key was successful

[attr.disabled]="isChecked ? '' : 'disabled'"