В Go например такие кейсы решаются кодогенерацией

типизированные темплейты нужны

Хм, я вот наоборот бы хотел чтобы tsx какой нибудь появился чтобы типизировать теплейты, а вам все метапрограммирование подавай)

Я тоже

А у них уже шаблоны компилируються в TypeScript - так что они типизированные :)

Т.е если не хочешь много if писать то генерируй код при/ перед компиляцией для рантайма

и как там указать типы?

В шаблонах никак, я про метапрограммирование и дженерик код. Тут изначально про динамическое создание компонента спрашивали

чото было про tsx у них в репке, но там написали что такого не будет

то вопрос другому Алексею был :)

Да, это печаль

И на хаки с $compile тоже положили - типа медленно, некотролируемо и прочее

чот не выходит что ангуляр в 2 или 4 раза круче реакта

кажется он в 2 или 4 раза круче чем ничего

(нарываюсь на бан)

@chicoxyzy Сейчас поддержка TS не очень большая - но они на ng-conf показывали демку и обьясняли что у них будет типизация параметров компонетов с помощью TS ( сейчас помоему уже это есть - нужно проверить ) а типы можно брать из свойств почеченных @Input @Output // directive Dropdown @Directive({ selector: '[dropdown]' }) export class Dropdown implements OnInit, OnDestroy { @HostBinding('class.open') @Input() public get isOpen():boolean {} @Input() public autoClose:string; @Input() public keyboardNav:boolean; // enum string: ['nonInput', always', 'outsideClick', 'disabled'] @Input() public appendToBody:boolean; @Output() public onToggle:EventEmitter<boolean>; }

кажется он в 2 или 4 раза круче чем ничего

Это первое впечатление, за TS и template driven forms с 2 way binding ему можно все простить

В создании сложных форм вряд ли кто то сравнится с ng

Что 1 что 2

это так

@bro_science template driven forms - да ну - model driven forms - вот где самый хардкор там вот такое можно делать   this.form.valueChanges .map((value) => { value.firstName = value.firstName.toUpperCase(); return value; }) .filter((value) => this.form.valid) .subscribe((value) => { console.log("valid value: vm = ",JSON.stringify(value)); });

@bro_science template driven forms - да ну - model driven forms - вот где самый хардкор там вот такое можно делать   this.form.valueChanges .map((value) => { value.firstName = value.firstName.toUpperCase(); return value; }) .filter((value) => this.form.valid) .subscribe((value) => { console.log("valid value: vm = ",JSON.stringify(value)); });

Пока им сложно назначить value )

http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Пока им сложно назначить value )

очень легко

FormGroup )

Пока нет, там нет updateValue

import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; @Component({ selector: "model-driven-form", directives: [REACTIVE_FORM_DIRECTIVES], templateUrl: 'model-driven-form.html' }) export class ModelDrivenForm { form: FormGroup; firstName = new FormControl("", Validators.required); constructor(fb: FormBuilder) { this.form = fb.group({ "firstName": this.firstName, "password":[" INITIAL VALUE HERE!!! ”, Validators.required] }); } onSubmitModelBased() { console.log("model-based form submitted"); console.log(this.form); } }

https://angular.io/docs/ts/latest/api/common/index/Control-class.html

Пока нет, там нет updateValue

Ты про кастомную реализацию ngModel для своих компонентов?

Там вроде несложно все

и для FormControl - updateValue есть

https://angular.io/docs/ts/latest/api/common/index/Control-class.html

Они допилят, из FormGroup можно только AbstractControl получить

так приведи его тип к Control…

Только сегодня пробовал

Короче, можно, но все в процессе

Ты про кастомную реализацию ngModel для своих компонентов?

Вопрос про model driven

Да, приводишь и без проблем. Два дня назад делал

Так

что такое updatedValue?

Скажем так, можно и у AbstractControl вызвать updateValue, хоть и в d.ts нет метода )

что такое updatedValue?

Значение конторлу изменить из контроллера

Ну там и еще плюшки

Можно это значение скрыто изменить, без вызова событий

И еще что-то, не помню третий аргумент %)

я не очень понимаю зачем в новом @angular/forms использовать model-driven формы

все что мне надо, а делал я уже довольно сложные формы со своими кастомными select/multiselect (с ngModel) и кастомный дженерик компонент form-field который из json schema рендерит любую форму, все это получилось покрыть template driven формами

без создания ControlGroup

в одном только месте с валидацией был затык и пришлось пробрасывать объект формы NgForm внутрь своего form-field чтобы добавить туда FormControl с валидаторами, но сам проброс тоже template driven <form #tagForm="ngForm"> ... <form-field class="gray font-size-12" [name]="key" [schema]="tagType.schema.properties[key]" [form]="tagForm" >

какой кейс вас заставляет использовать model driven формы?

какой кейс вас заставляет использовать model driven формы?

FRP для форм - к примеру debounce на все компоненты - 1 строчкой кода this.form.valueChanges .debounce(500) .map((value) => { value.firstName = value.firstName.toUpperCase(); return value; }) .filter((value) => this.form.valid) .subscribe((value) => { console.log("valid value: vm = ", JSON.stringify(value)); });

this.form это FormGroup ?

да

<form #myForm="ngForm"> - в этом варианте в myForm лежит NgForm

myForm.form - это ваш FormGroup

делайте с ним что хотите

<form #myForm="ngForm"> - в этом варианте в myForm лежит NgForm

что-то слишком мало слов form для одной строчки

что-то слишком мало слов form для одной строчки

:) бывает

делайте с ним что хотите

зачем мне ngForm? мне намного больше нравиться FormGroup и FormBuilder - намного проще делать кроссвалидацию и FRP

Так у вас все тоже самое будет, только вместо FormBuilder будут директивы в шаблоне

они соберут вам FormGroup

потом с ним играйтесь так же как и раньше

Ок, а как кроссвалидацию делать?

по конкретней сформулируйте

кейс какой?

ну два поля зависят друг от друга - дата начала и дата конца ( дата начала не может быть позже даты конца )

ну вроде не проблема свои кастомные валидаторы написать которые директивами биндятся к ngModel контролам

тут то же самое, вместо FormBuilder в котором вы руками валидаторы добавляете за вас это сделают директивы

да это изврощение - вот как в формах от модели это элегантно решаеться this.form = fb.group({ name: ['', Validators.required], email: ['', Validators.required] matchingPassword: fb.group({ password: ['', Validators.required], confirmPassword: ['', Validators.required] }, {validator: this.areEqual}) <-------- });

в чем тут элегантность? в том что метод areEqual будет жить в компоненте формы? и не будет переиспользоваться в других местах?

в чем тут элегантность? в том что метод areEqual будет жить в компоненте формы? и не будет переиспользоваться в других местах?

Это пример - валидаторы легко выносяться в отдельные классы

да, и для этого в ng2 действительно есть отдельные классы

почему их не использовать?

this.form = fb.group({ name: ['', Validators.required], email: ['', Validators.required] matchingPassword: fb.group({ password: ['', Validators.required], confirmPassword: ['', Validators.required] }, {validator: MYCustomValidators.areEqual }) <-------- });

хотя дело вкуса конечно, я не настаиваю разумеется на том что надо делать только так

Еще раз как в формах от шаблона присобачить кастомный валидатор для 2х полей сразу? Я пока не видел ни 1 простого решения. Увижу соглашусь :)

просто я думал вы приведете пример где без model forms никак не реализовать

просто я думал вы приведете пример где без model forms никак не реализовать

ну вот как кроссвалидацию сделать?

import {Directive, forwardRef} from '@angular/core' import {NG_VALIDATORS, FormControl} from '@angular/forms' function validateDomainFactory() { return (c: FormControl) => { let VALIDATION_REGEXP = /^([a-zA-Z0-9][a-zA-Z0-9-]+\.)?[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/i return VALIDATION_REGEXP.test(c.value) ? null : { validateDomain: { valid: false } } } } @Directive({ selector: '[validateDomain][ngModel],[validateDomain][formControl]', providers: [ { provide: NG_VALIDATORS, useExisting: forwardRef(() => DomainNameValidator), multi: true } ] }) export class DomainNameValidator { @Input() secondFiled: FormControl // <<<<--- сюда передаем второй контол от которого зависим validator: Function constructor(/*Dependency Injection here*/) { this.validator = validateDomainFactory() } validate(c: FormControl) { return this.validator(c) } }

валидаторы это просто директивы

в них можно передать другой компонент от которого зависит текущий

и реализовать логику

Мне просто удобнее держать всю логику в контроллерах, а не в темплейтах

Блин у валидатора появляеться прямая ссылка на класс компонента - как-то не архитектурненько. Больше на костыль похоже

логика не в темплейте, логика в отдельном файле валидатора, в темплейте мы только декларативно биндим эту логику туда где надо

в ng1 по-моему так и писались валидаторы кастомные

всякие confirm-password валидаторы и т.д

что-то никто не жаловался

Ну а в Ng2 можно не писать директиву чтобы применить валидатор :)

если писать формы от модели

ну да, т.е к чему и пришли можно так а можно этак , кому как нравится

у меня просто взгляд на формы под другим углом видимо

чот читаю вас и понимаю что в ангуляре проблема с тем, что можно сделать одно и то же кучей способов

ну да, т.е к чему и пришли можно так а можно этак , кому как нравится

Тут соглашусь. Можно и так и так. Нету и там и там ничего невозможного.

он же фреймворк, не должно такого быть

должен быть один способ

чот читаю вас и понимаю что в ангуляре проблема с тем, что можно сделать одно и то же кучей способов

Сказал приверженец React у которого каждый день выходит новый фреймворк :)

у реакта ничего не выходит

не, не надо накидывать не React)