How do you load a model into a reactive form?

Question

Angular

I load the data in the form on click of the button like this

editUser(user: User) : void {
        this.user = user;
        this.load(user);
        $('#add-user').modal();
    }

    load(user: User) : void {
        this.userForm.controls['firstName'].setValue(user.firstName);
        this.userForm.controls['surname'].setValue(user.surname);
        this.userForm.controls['email'].setValue(user.email);
        this.userForm.controls['phone'].setValue(user.phone);
        this.userForm.controls['role'].setValue(user.role);
        this.userForm.controls['state'].setValue(user.state);
    }

How can I make each element already have the touched status? I need errors to appear, but they are shown to me if the element is already touched

Answer 1

Controls have special functions for this markAsDirty() and markAsTouched()
this.userForm.controls['state'].markAsDirty()
this.userForm.controls['state'].markAsTouched()