Angular FormControl 占位符不会使用传递的值动态更新

Question

我希望有人可以帮助我，我在这里有点障碍。 我对 Angular 很陌生，所以请原谅我的错误。

我正在尝试更新输入 FormControl 的占位符文本，如下所示：

我有以下组件类：

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 组件如下所示：

<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>

我假设发生这种情况是因为我没有创建我的 EditFormComponent 的实例，而是从类中调用一个方法，因此在构建我的表单组时，我传递的值没有在编译时注册。

我也尝试调用构造函数，而不是调用我的 passObjectValues() 方法，但这本身就是一个挑战。

我的构造函数是这样的：

constructor(editedRestaurant:RestaurantsPost) {

    this.templateRestaurant=editedRestaurant;

我的 RestaurantPost 对象：

@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 看起来像这样：

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

浏览器抛出此错误：

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

有什么想法吗？

谢谢！

更新：

我设法通过向打开我的编辑表单的字段添加绑定来解决我的问题：

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

当我单击“编辑”按钮时，我正在调用一个将当前对象的值保存到 selectedRestaurant 的方法。

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

在我的 restaurant.component 中，我有这个方法可以保存我按下编辑按钮的餐厅，布尔字段用于切换编辑表单：

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

}

这已绑定到我的编辑表单组件中的一个对象：

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

在我的 HTML 文件中我添加了这个：

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

Answer 1

你试过了吗

<input type="text" #input />
@ViewChild('input') input: ElementRef;
this.input.nativeElement.placeholder = 'placeholder text';

Answer 2

如果您删除表单控件中的占位符会怎样？删除占位符并检查此问题是否真的针对占位符。

我希望这个问题与占位符无关。它与不必要/错过的提供者有关。所以请删除提供者中的String 并检查

providers: [
    HttpErrorHandler,
    HttpClientModule, //this is also not needed here
    String // remove this and try 
  ],

更新：

还提供构造函数参数作为可空值或删除构造函数

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
    }

Answer 3

所以我设法通过向打开我的编辑表单的字段添加绑定来解决我的问题：

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

当我点击“编辑”按钮时，我正在调用一个将当前对象的值保存到 selectedRestaurant 的方法。

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

在我的 restaurant.component 中，我有这个方法可以保存我按下编辑按钮的餐厅，布尔字段用于切换编辑表单：

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

}

这已绑定到我的编辑表单组件中的一个对象：

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

在我的 HTML 文件中我添加了这个：

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

Answer 4

我认为问题出在这里：

namePlaceholder:String="";

应该是

namePlaceholder: string="";