feat(ap): Required Inputs

fix #1340

src/app/compiler/angular/deps/helpers/class-helper.ts

@@ -1445,32 +1445,45 @@ export class ClassHelper {
     }
 
     private visitInputAndHostBinding(property, inDecorator, sourceFile?) {
-        let inArgs = inDecorator.expression.arguments;
+        const inArgs = inDecorator.expression.arguments;
+
         let _return: any = {};
 
-        let getRequiredField = () =>
+        let isInputConfigStringLiteral = false;
+        let isInputConfigObjectLiteralExpression = false;
+        let hasRequiredField = false;
+        let hasAlias = false;
+
+        const getRequiredField = () =>
             inArgs[0].properties.find(property => property.name.escapedText === 'required');
-        let getAliasProperty = () =>
+        const getAliasProperty = () =>
             inArgs[0].properties.find(property => property.name.escapedText === 'alias');
 
-        let isInputConfigStringLiteral = inArgs[0] && ts.isStringLiteral(inArgs[0]);
-        let isInputConfigObjectLiteralExpression =
-            inArgs[0] && ts.isObjectLiteralExpression(inArgs[0]);
-        let hasRequiredField = isInputConfigObjectLiteralExpression && !!getRequiredField();
-        let hasAlias = isInputConfigObjectLiteralExpression ? !!getAliasProperty() : false;
-
-        _return.name = isInputConfigStringLiteral
-            ? inArgs[0].text
-            : hasAlias
-            ? getAliasProperty().initializer.text
-            : property.name.text;
+        if (inArgs.length > 0 && inArgs[0].properties) {
+            isInputConfigStringLiteral = inArgs[0] && ts.isStringLiteral(inArgs[0]);
+            isInputConfigObjectLiteralExpression =
+                inArgs[0] && ts.isObjectLiteralExpression(inArgs[0]);
+            hasRequiredField = isInputConfigObjectLiteralExpression && !!getRequiredField();
+            hasAlias = isInputConfigObjectLiteralExpression ? !!getAliasProperty() : false;
+
+            _return.name = isInputConfigStringLiteral
+                ? inArgs[0].text
+                : hasAlias
+                ? getAliasProperty().initializer.text
+                : property.name.text;
+
+            _return.required = !!getRequiredField();
+        } else {
+            _return.name = property.name.text;
+        }
+
         _return.defaultValue = property.initializer
             ? this.stringifyDefaultValue(property.initializer)
             : undefined;
         _return.deprecated = false;
         _return.deprecationMessage = '';
 
-        if (hasRequiredField) {
+        if (inArgs.length > 0 && inArgs[0].properties && hasRequiredField) {
             _return.optional = getRequiredField().initializer.kind !== SyntaxKind.TrueKeyword;
         }
 
@@ -1509,9 +1522,9 @@ export class ClassHelper {
             }
             // Try to get inferred type
             if (property.symbol) {
-                let symbol: ts.Symbol = property.symbol;
+                const symbol: ts.Symbol = property.symbol;
                 if (symbol.valueDeclaration) {
-                    let symbolType = this.typeChecker.getTypeOfSymbolAtLocation(
+                    const symbolType = this.typeChecker.getTypeOfSymbolAtLocation(
                         symbol,
                         symbol.valueDeclaration
                     );

src/locales/bg-BG.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_BG_BG = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Задължително',
     reset: 'Нулиране',
     'results-matching': 'намерени резултати',
     returns: 'Returns',

src/locales/de-DE.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_DE_DE = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Erforderlich',
     reset: 'Zurücksetzen',
     'results-matching': 'übereinstimmende Ergebnisse',
     returns: 'Returns',

src/locales/en-US.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_EN_US = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Required',
     reset: 'Reset',
     'results-matching': 'results matching',
     returns: 'Returns',

src/locales/es-ES.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_ES_ES = {
     providers: 'Proveedores',
     pure: 'Puro',
     readme: 'Léeme',
+    required: 'Requerido',
     reset: 'Restablecer',
     'results-matching': 'comparación de resultados',
     returns: 'Devuelve',

src/locales/fr-FR.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_FR_FR = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Requis',
     reset: 'Remise à zéro',
     'results-matching': 'résultats matchant',
     returns: 'Renvoie',

src/locales/hu-HU.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_HU_HU = {
     providers: 'Providerek',
     pure: 'Pure',
     readme: 'README',
+    required: 'Kívánt',
     reset: 'Visszaállít',
     'results-matching': 'találat',
     returns: 'Visszatérési érték',

src/locales/it-IT.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_IT_IT = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Necessario',
     reset: 'Reset',
     'results-matching': 'corrispondenza',
     returns: 'Returns',

src/locales/ja-JP.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_JA_JP = {
     providers: 'プロバイダー',
     pure: 'Pure',
     readme: 'README',
+    required: '必要',
     reset: 'リセット',
     'results-matching': '件の結果が一致しました',
     returns: '戻り値',

src/locales/ko-KR.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_KO_KR = {
     providers: '제공자',
     pure: 'Pure',
     readme: 'README',
+    required: '필수의',
     reset: '초기화',
     'results-matching': '개의 결과가 일치했습니다',
     returns: '반환',

src/locales/nl-NL.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_NL_NL = {
     providers: 'Providers',
     pure: 'Puur',
     readme: 'README',
+    required: 'Vereist',
     reset: 'Reset',
     'results-matching': 'overeenkomende resultaten',
     returns: 'Returns',

src/locales/pl-PL.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_PL_PL = {
     providers: 'Dostarczyciele',
     pure: 'Czysty',
     readme: 'README',
+    required: 'Wymagany',
     reset: 'Reset',
     'results-matching': 'pasujących wyników',
     returns: 'Zwraca',

src/locales/pt-BR.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_PT_BR = {
     providers: 'Providers',
     pure: 'Puro',
     readme: 'README',
+    required: 'Obrigatório',
     reset: 'Resetar',
     'results-matching': 'resultados correspondentes',
     returns: 'Retorna',

src/locales/sk-SK.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_SK_SK = {
     providers: 'Providers',
     pure: 'Pure',
     readme: 'README',
+    required: 'Požadovaný',
     reset: 'Resetovať',
     'results-matching': 'výsledkov pre',
     returns: 'Návratová hodnota',

src/locales/zh-CN.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_ZH_CN = {
     providers: '提供商列表',
     pure: 'Pure',
     readme: '手册',
+    required: '必需的',
     reset: '重置',
     'results-matching': '匹配的结果',
     returns: '返回',

src/locales/zh-TW.ts

@@ -80,6 +80,7 @@ export const TRANSLATION_ZH_TW = {
     providers: '提供者列表',
     pure: 'Pure',
     readme: 'README',
+    required: '必需的',
     reset: '重設',
     'results-matching': '匹配的結果',
     returns: '回傳值',

src/templates/partials/block-input.hbs

@@ -16,6 +16,13 @@
                     </td>
                 </tr>
                 {{/if}}
+                {{#if required}}
+                <tr>
+                    <td class="col-md-4">
+                        <i>{{t "required" }} : </i>&nbsp;<b>{{ required }}</b>
+                    </td>
+                </tr>
+                {{/if}}
                 {{#if defaultValue}}
                 <tr>
                     <td class="col-md-4">

test/fixtures/todomvc-ng2/src/app/list/todo/todo.component.ts

@@ -26,7 +26,10 @@ export class TodoComponent {
     /**
      * The entry todo from the parent list
      */
-    @Input() todo: Todo;
+    @Input({
+        required: true
+    })
+    todo: Todo;
 
     unionVariable: string[] | Todo;
 

test/src/cli/cli-generation-big-app.spec.ts

@@ -948,4 +948,9 @@ describe('CLI simple generation - big app', () => {
         file = read(distFolder + '/pipes/StandAlonePipe.html');
         expect(file).to.contain('<td class="col-md-3">standalone</td>');
     });
+
+    it('should support required for inputs', () => {
+        const file = read(distFolder + '/components/TodoComponent.html');
+        expect(file).to.contain('<i>Required : </i>&nbsp;<b>true</b>');
+    });
 });