Как добиться динамического пользовательского шаблона с помощью ngx-formly - PullRequest
Новая
       6

Как добиться динамического пользовательского шаблона с помощью ngx-formly

0 голосов
/ 18 ноября 2018

Я использую ngx-formly и пытаюсь ввести пользовательский шаблон, который предназначен только для просмотра.Когда шаблон статичен, это нормально, но если я попытаюсь ввести некоторую угловую операцию, это не сработает.Смотрите это демо .Есть предложения? 

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields">
        <button type="submit">Submit</button>
      </formly-form>
    </form>

    {{ model|json }}
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = {};
  name = "John";
  fields: FormlyFieldConfig[] = [
    {template: `<div>{{name}}</div>`}, // <-- I expected to see John, but I saw {{name}}
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Field 1',
        placeholder: 'Formly is terrific!',
      },
    },
  ];

  submit(model) {
    console.log(model);
  }
}

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Я разместил вопрос в github и получил правильный ответ, пожалуйста, проверьте this для более подробной информации.

  • Первый подход, проверьте код здесь

    • Он не поддерживает obervable

  • Второй подход, проверьте код здесь

    • Он поддерживает наблюдаемый, но мне нужно обновить ngx-formly до v5.beta, в этот момент я составляю этот ответ.
0 голосов
/ 18 ноября 2018

Настройка модуля 

@NgModule({
   imports: [ 
     BrowserModule,
     ReactiveFormsModule,
     FormlyModule.forRoot({
       types: [
        { name: 'customInput', component: FormlyFieldInput },
       ]
     }),
   ],
   declarations: [ AppComponent, FormlyFieldInput ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Настройка пользовательского компонента и прослушивание keyup 

@Component({
  selector: 'formly-field-input',
  template: `
     <div>{{this.model.profilePictureNotEditable}}</div>
     <input type="text" [formControl]="formControl"  [formlyAttributes]="field">`,
})
export class FormlyFieldInput extends FieldType implements OnInit {
    val;
    constructor() {
      super();
    }
    ngOnInit() {
      console.log(this.key);
      console.log(this.model)
    }

}

Настройка формы в app.component 

 @Component({
  selector: 'my-app',
  template: `
     <form [formGroup]="form" (ngSubmit)="submit(model)">
     <formly-form [model]="model" [fields]="fields">
      <button type="submit">Submit</button>
     </formly-form>
     </form>

    {{ model|json }}
    `,
 })
export class AppComponent {
  form = new FormGroup({});
  model = {profilePictureNotEditable: 'John'};

  fields: FormlyFieldConfig[] = [
  {
   fieldGroup: [
   {
    key: 'name',
    type: 'customInput',
    templateOptions: {
    label: 'Field 1',
    type: 'text',
    placeholder: 'Formly is terrific!',
  },
 }]
}];

 submit(model) {
   console.log(model);
   this.model.profilePictureNotEditable = 'this will be the profile picture!'
   }
 }

https://stackblitz.com/edit/ngx-formly-custom-template-ydrfss Надеюсь, это поможет вам !!

...