[Fixed] Angular FormControl Placeholder will not update dynamically with passed value

Issue

I hope someone can help me, I’m at a bit of a blocking point here.
I am pretty new to Angular so please excuse my mistakes.

I am trying to update my placeholder text for an input FormControl as follows:

I have the following component class:

export class EditFormComponent {

namePlaceholder:String="";

  restaurantForm = new FormGroup({
    id: new FormControl(''),
    name: new FormControl(''),
    address: new FormControl(''),
    specialities: new FormControl(''),
    details: new FormControl('')
  });

 passObjectValues(restaurant: RestaurantsPost) {
    this.restaurantForm.setValue({ id: restaurant.id, name: restaurant.name, address: restaurant.addressId });
    this.namePlaceholder=restaurant.name + "test";
    console.log(this.restaurantForm);
    console.log(this.namePlaceholder);
  }

HTML component looks like so:

<form class="container-card" [formGroup]="restaurantForm" (ngSubmit)="submit(restaurantForm)">
    <div class="form-group">
        <label style="color: white; font-weight:500;"for="name">
            Name
        </label>
        <input 
            formControlName="name"
            id="name" 
            type="text" 
            class="form-control"
            [placeholder]="namePlaceholder" // doesn't work
            placeholder="{{namePlaceholder}}"> // doesn't work 
    </div>

I assume this is happening because I do not create an instance of my EditFormComponent but I am instead calling a method from the class, and thus the value I pass are not registered at compile-time when building my form-group.

I have also tried calling a constructor, instead of calling my passObjectValues() method, but this is a challenge of its own.

My constructor is like so:

constructor(editedRestaurant:RestaurantsPost) {

    this.templateRestaurant=editedRestaurant;

My RestaurantPost Object:

@Injectable()
export class RestaurantsPost {


    id: String;
    name: String;
    addressId: String;
    specialitiesId: String;
    detailsId: String;
    bookingId: String;

    constructor(id:String,name:String,addressId:String,specialitiesId: String,detailsId: String,bookingId: String){
        this.id=id;
        this.name=name;
        this.addressId=addressId;
        this.specialitiesId=specialitiesId;
        this.detailsId=detailsId;
        this.bookingId=bookingId
    }
}

app.module.ts looks like so:

@NgModule({
  declarations: [
    AppComponent,
    RestaurantComponent,
    EditFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NoopAnimationsModule,
    DemoMaterialModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    HttpErrorHandler,
    HttpClientModule,
    String
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Browser throws this error :

>    main.ts:12 Error: Can't resolve all parameters for String: (?).
>     at getUndecoratedInjectableFactory (core.js:11428)
>     at injectableDefOrInjectorDefFactory (core.js:11418)
>     at providerToFactory (core.js:11461)
>     at providerToRecord (core.js:11448)
>     at R3Injector.processProvider (core.js:11346)
>     at core.js:11332
>     at core.js:4129
>     at Array.forEach (<anonymous>)
>     at deepForEach (core.js:4129)
>     at R3Injector.processInjectorType (core.js:11332)

Any ideas?

Thanks!

UPDATE :

I managed to fix my problem by adding a binding to the field that opens my edit-form:

<edit-form [selectedRestaurant] = "selectedRestaurant" *ngIf="editPressed"></edit-form>

When I click the "edit" button I am calling a method that is saving the value of the current object to the selectedRestaurant.

<button mat-icon-button (click)="editRestaurant(restaurant,!editPressed)">

In my restaurant.component i have this method that saves the restaurant for which i press the edit button and the boolean field is used to toggle the edit-form:

editRestaurant(passedRestaurant: Restaurants, isActivated:boolean): void {
        this.selectedRestaurant=passedRestaurant;
        this.editPressed=isActivated;

}

This is bound to an object in my edit-form component:

@Input('selectedRestaurant') selectedRestaurant: Restaurants = {
    id: 0,
    name: '',
    address: this.templateAddress,
    specialities: this.templateSpecialities,
    details: this.templateDetails,
    booking: this.templateBookings
  };

In my HTML file i added this :

<input  
    formControlName="name" 
    id="name" 
    type="text" 
    class="form-control"
    placeholder={{selectedRestaurant.name}}>

Solution

So i managed to fix my problem by adding a binding to the field that opens my edit-form:

<edit-form [selectedRestaurant] = "selectedRestaurant" *ngIf="editPressed"></edit-form>

When I click the "edit" button I am calling a method that is saving the value of the current object to the selectedRestaurant.

<button mat-icon-button (click)="editRestaurant(restaurant,!editPressed)">