
Alexey
02.08.2016
17:36:03
В Go например такие кейсы решаются кодогенерацией

Ҫѐҏӗѫӑ
02.08.2016
17:36:04
типизированные темплейты нужны

Sergey
02.08.2016
17:36:07

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

Google

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

Ҫѐҏӗѫӑ
02.08.2016
17:37:07
и как там указать типы?

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

Ҫѐҏӗѫӑ
02.08.2016
17:38:24
чото было про tsx у них в репке, но там написали что такого не будет
то вопрос другому Алексею был :)

Sergey
02.08.2016
17:39:22
Да, это печаль
И на хаки с $compile тоже положили - типа медленно, некотролируемо и прочее

Ҫѐҏӗѫӑ
02.08.2016
17:40:42
чот не выходит что ангуляр в 2 или 4 раза круче реакта
кажется он в 2 или 4 раза круче чем ничего
(нарываюсь на бан)

Алексей
02.08.2016
17:41:24
@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>;
}

Alexey
02.08.2016
17:44:50
В создании сложных форм вряд ли кто то сравнится с ng

Google

Alexey
02.08.2016
17:45:42
Что 1 что 2

Ҫѐҏӗѫӑ
02.08.2016
17:45:42
это так

Алексей
02.08.2016
17:48:44
@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)); });

Sergey
02.08.2016
17:49:28

Алексей
02.08.2016
17:49:28
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Sergey
02.08.2016
17:50:03
FormGroup )
Пока нет, там нет updateValue

Алексей
02.08.2016
17:50:26
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

Alexey
02.08.2016
17:52:18
Там вроде несложно все

Алексей
02.08.2016
17:53:03
и для FormControl - updateValue есть

Sergey
02.08.2016
17:53:42

Алексей
02.08.2016
17:54:08
так приведи его тип к Control…

Sergey
02.08.2016
17:54:11
Только сегодня пробовал
Короче, можно, но все в процессе

Maksim
02.08.2016
17:55:49
Да, приводишь и без проблем. Два дня назад делал
Так

Google

Ҫѐҏӗѫӑ
02.08.2016
17:58:47
что такое updatedValue?

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

Maksim
02.08.2016
18:00:54
Ну там и еще плюшки
Можно это значение скрыто изменить, без вызова событий
И еще что-то, не помню третий аргумент %)

Alexey
02.08.2016
18:51:00
я не очень понимаю зачем в новом @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 формы?


Алексей
02.08.2016
19:00:02
какой кейс вас заставляет использовать 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));
});

Alexey
02.08.2016
19:07:24
this.form это FormGroup ?

Алексей
02.08.2016
19:07:29
да

Alexey
02.08.2016
19:08:12
<form #myForm="ngForm"> - в этом варианте в myForm лежит NgForm
myForm.form - это ваш FormGroup
делайте с ним что хотите

Ҫѐҏӗѫӑ
02.08.2016
19:09:38

Алексей
02.08.2016
19:10:01
делайте с ним что хотите
зачем мне ngForm? мне намного больше нравиться FormGroup и FormBuilder - намного проще делать кроссвалидацию и FRP

Google

Alexey
02.08.2016
19:10:58
Так у вас все тоже самое будет, только вместо FormBuilder будут директивы в шаблоне
они соберут вам FormGroup
потом с ним играйтесь так же как и раньше

Алексей
02.08.2016
19:11:57
Ок, а как кроссвалидацию делать?

Alexey
02.08.2016
19:12:21
по конкретней сформулируйте
кейс какой?

Алексей
02.08.2016
19:12:52
ну два поля зависят друг от друга - дата начала и дата конца ( дата начала не может быть позже даты конца )

Alexey
02.08.2016
19:14:03
ну вроде не проблема свои кастомные валидаторы написать которые директивами биндятся к ngModel контролам
тут то же самое, вместо FormBuilder в котором вы руками валидаторы добавляете за вас это сделают директивы

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

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

Алексей
02.08.2016
19:16:30

Alexey
02.08.2016
19:17:21
да, и для этого в ng2 действительно есть отдельные классы
почему их не использовать?

Алексей
02.08.2016
19:17:31
this.form = fb.group({
name: ['', Validators.required],
email: ['', Validators.required]
matchingPassword: fb.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, {validator: MYCustomValidators.areEqual }) <--------
});

Alexey
02.08.2016
19:18:24
хотя дело вкуса конечно, я не настаиваю разумеется на том что надо делать только так

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

Alexey
02.08.2016
19:18:43
просто я думал вы приведете пример где без model forms никак не реализовать

Алексей
02.08.2016
19:19:07


Alexey
02.08.2016
19:25:06
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)
}
}

Google

Alexey
02.08.2016
19:25:17
валидаторы это просто директивы
в них можно передать другой компонент от которого зависит текущий
и реализовать логику

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

Алексей
02.08.2016
19:26:47
Блин у валидатора появляеться прямая ссылка на класс компонента - как-то не архитектурненько. Больше на костыль похоже

Alexey
02.08.2016
19:26:57
логика не в темплейте, логика в отдельном файле валидатора, в темплейте мы только декларативно биндим эту логику туда где надо
в ng1 по-моему так и писались валидаторы кастомные
всякие confirm-password валидаторы и т.д
что-то никто не жаловался

Алексей
02.08.2016
19:27:56
Ну а в Ng2 можно не писать директиву чтобы применить валидатор :)
если писать формы от модели

Alexey
02.08.2016
19:28:30
ну да, т.е к чему и пришли можно так а можно этак , кому как нравится
у меня просто взгляд на формы под другим углом видимо

Ҫѐҏӗѫӑ
02.08.2016
19:29:00
чот читаю вас и понимаю что в ангуляре проблема с тем, что можно сделать одно и то же кучей способов

Алексей
02.08.2016
19:29:05

Ҫѐҏӗѫӑ
02.08.2016
19:29:16
он же фреймворк, не должно такого быть
должен быть один способ

Алексей
02.08.2016
19:29:27

Ҫѐҏӗѫӑ
02.08.2016
19:29:39
у реакта ничего не выходит

Alexey
02.08.2016
19:29:40
не, не надо накидывать не React)
Эта группа больше не существует