Question

我的代码下面有一个输入很少的表单。我想要提交所有值。能够使用ngModel获取所有元素值。如何获得选择选项的选择值。

 <form #f="ngForm" (ngSubmit) = "saveData(f)">
  <fieldset>
   <legend>Your Details:</legend>
   <label>Name: <input type="text" name="name" size="30" maxlength="100" [(ngModel)] = "name"></label><br />
   <label>Email: <input type="email" name="email" size="30" maxlength="100" [(ngModel)] = "email"></label><br />
   <label>Password: <input type="password" name="password" size="30" maxlength="100" [(ngModel)] = "password"></label><br />
   <select>
     <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
     </option>
   </select>
 <input type="submit" value="Save"/>
</fieldset><br />
</form>

Answer 1

我认为它应该是 [value] =“combo”

<select #selCombo>
  <option *ngFor = "let combo of combos" [value]="combo">{{combo}}
  </option>
</select>

然后在HTML端获取选定的值（如果您不想在组件中写入）

<div>{{selCombo.value}}</div>

Answer 2

使用 [（ngModel）] 将所选值与变量OR模型绑定，如下所示：

export const TRANSLATOR_GUARD: InjectionToken<string> = new InjectionToken("TRANSLATOR_GUARD");
export const TRANSLATOR_OPTIONS: InjectionToken<object> = new InjectionToken("TRANSLATOR_OPTIONS");
export const TRANSLATOR_MODULE: InjectionToken<string> = new InjectionToken("TRANSLATOR_MODULE");

@NgModule({
    declarations: [
        TranslatePipe,
        TranslateComponent,
    ],
    exports: [
        TranslatePipe,
        TranslateComponent,
    ],
    imports: [HttpModule],
    providers: [
        TranslationLoaderJson,
        TranslateLogHandler,
        TranslatorContainer,
    ],
})
export class TranslatorModule {
    public static forRoot(options: any = {}, module: string = "default"): ModuleWithProviders {
        return {
            ngModule: TranslatorModule,
            providers: [
                {
                    provide: TRANSLATOR_GUARD,
                    useFactory: guardTranslatorModule,
                    deps: [ [TranslatorConfig, new Optional(), new SkipSelf()]],
                },
                { provide: TRANSLATOR_OPTIONS, useValue: options },
                { provide: TranslatorConfig, useFactory: createTranslatorConfig, deps: [ TRANSLATOR_OPTIONS ] },
                { provide: TRANSLATOR_MODULE, useValue: module },
                {
                    provide: Translator,
                    useFactory: createTranslator,
                    deps: [ TranslatorContainer, TRANSLATOR_MODULE ],
                },
            ],
        };
    }

    public static forChild(module: string = "default") {
        return {
            ngModule: TranslatorModule,
            providers: [
                { provide: TRANSLATOR_MODULE, useValue: module },
                {
                    provide: Translator,
                    useFactory: createTranslator,
                    deps: [ TranslatorContainer, TRANSLATOR_MODULE ],
                },
            ],
        };
    }

    constructor(@Optional() @Inject(TRANSLATOR_GUARD) guard: any) {}
}

export function guardTranslatorModule(options: any): string {
    if (options) {
        throw new Error(
            "Application called TranslatorModule.forRoot twice. For submodules use TranslatorModule.forChild instead.",
        );
    }

    return "guarded";
}

export function createTranslatorConfig(config: any = {}) {
    return new TranslatorConfig(config);
}

export function createTranslator(translatorContainer: TranslatorContainer, module: string) {
    return translatorContainer.getTranslator(module);
}

或

<select [(ngModel)]="model.combo"> <option *ngFor = "let combo of combos" value={{combo}}>{{combo}} </option> </select>

Answer 3

问题是没有设置名称属性。

<select [(ngModel)]="gender" name="gender">
   <option *ngFor = "let combo of combos" [value]=combo>{{combo}}
   </option>
</select>

如何在angular2中的表单元素中获取下拉列表选择的值

3 个答案: